跪拜 Guibai
← All articles
AIGC · Design · Visual Design

From One Sentence to a Dashboard Draft: A Structured AI Skill for Designers

By Gyrate ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

This structured approach to AI-assisted design tackles a real pain point: AI-generated dashboards often look good but lack business meaning, making them useless for real workflows. By forcing a human-in-the-loop confirmation of a detailed brief before any image is created, the skill turns AI from a random image generator into a collaborative design partner that aligns with client and product needs. For Western developers building AI tools for design or enterprise, the lesson is clear: the bottleneck isn't image quality—it's the lack of structured, domain-aware pipelines that let humans steer AI output.

Summary

A developer has built a structured AI skill that transforms a vague user request into a usable dashboard design draft. The core insight: directly generating a final image from one sentence produces wallpaper, not a working design. Instead, the skill forces a multi-step pipeline: first, AI interprets the request and generates a detailed brief.md covering theme, main visual, six chart panels with business context, and assumptions. The user confirms or adjusts this brief before any image is generated.

Only after the brief is locked does the skill move to visual style selection—tied to industry (medical gets white-blue, agriculture gets controlled green, port gets blue-green or user-specified colors)—and then to image generation. The final output is a high-quality bitmap concept image that serves as a "designer starter draft," not a final deliverable. The skill also enforces layout rules (fixed top-bottom structure with 6 panels), a chart expression library that maps business problems to chart types per industry, and a "Zhongke Smart City" aesthetic that prioritizes professional, clean, and solution-oriented visuals over flashy cyberpunk effects.

The approach deliberately avoids promising editable SVG or Figma output upfront. The developer argues that generating a visually compelling and structurally sound bitmap first, then later extracting a structured proposal, layout blueprint, and component mapping, is a more realistic path to editable design files. The skill is implemented as a set of markdown files and helper scripts, not a complex system, and relies heavily on ChatGPT Image 2.0 for generation.

Takeaways
ChatGPT Image 2.0 enables generating dashboard concept images from a single sentence, but direct generation without structure produces decorative wallpaper, not usable designs.
A multi-stage pipeline—requirement understanding, brief generation, user confirmation, style selection, then image generation—is critical for producing workable drafts.
The brief.md must include dashboard title, target users, usage scenario, design goals, main visual suggestion, six chart panels with business context, and assumptions needing user confirmation.
Visual styles are tied to industry: medical (white-blue), port (blue-green or user-specified), agriculture (controlled green), government/parks (low-saturation blue-green).
Default output is PNG at 1920x1080, 16:9; editable SVG/Figma conversion is deferred to a later stage after the bitmap concept is approved.
A chart expression library maps business problems to chart types per industry, preventing generic line/pie/bar chart defaults.
Layout is fixed top-bottom with 6 panels (3 left, 3 right) and a central main visual, prioritizing stability over flexibility in the first stage.
The skill is implemented as markdown files (SKILL.md, brief-template.md, design-rules.md, etc.) and helper Python scripts, not a complex system.
The approach is suitable for pre-sales proposals, product prototype exploration, designer starter drafts, and business team alignment, but not for production-ready frontend code or final design deliverables.
Conclusions

The real innovation isn't the image generation—it's the structured brief.md that forces AI to articulate its design rationale before drawing, turning a black-box output into a transparent, discussable proposal.

Deferring editable SVG/Figma output is a smart trade-off: it avoids the trap of trying to solve too many hard problems (visual quality, layer structure, component reuse) at once, and instead builds a reliable bitmap pipeline first.

The industry-specific color and chart rules reveal a deeper truth: AI design tools need domain knowledge to be useful. Generic "tech blue" dashboards fail because they ignore the visual language that clients in different sectors expect.

The skill's emphasis on "not changing chart content when changing color tone" highlights a common failure mode of AI image generation—prompt drift—and shows how explicit constraints in the skill can prevent it.

This approach could generalize beyond dashboards to any AI-assisted design task where alignment on intent is more important than the first visual output: UI mockups, infographics, presentation slides.

The reliance on ChatGPT Image 2.0 means the skill's quality is tied to the underlying model's capabilities, but the structured pipeline makes it model-agnostic in principle—a good architectural choice.

The mobile remote control feature of Codex mentioned at the end hints at a future where such skills are triggered from phones, making design kickoff even more accessible.

Concepts & terms
Designer starter draft
A concept image that is not a final design but is detailed enough for a designer to understand the theme, layout, chart structure, and visual direction, serving as a starting point for further refinement.
brief.md
A structured markdown document generated by AI that outlines the dashboard's theme, target users, main visual, six chart panels with business context, and assumptions, which the user must confirm before image generation.
Chart expression library
A curated set of chart types and data representations mapped to specific business problems per industry, ensuring AI doesn't default to generic charts but selects ones relevant to the domain (e.g., berth status for ports, bed water level for hospitals).
Zhongke Smart City aesthetic
A design philosophy that prioritizes professional, clean, and solution-oriented visuals acceptable to enterprise and government clients, avoiding flashy cyberpunk effects, neon, and meaningless light effects.
Prompt drift
A common failure mode in AI image generation where changing one aspect of the prompt (e.g., color tone) unintentionally alters other aspects (e.g., chart content), requiring explicit constraints to prevent.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗