跪拜 Guibai
← All articles
Frontend · AI Programming · Visual Design

Han Design Drops the Configuration Quiz and Adds an Autopilot for AI-Generated Pages

By 雨夜寻晴天 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Agent skills that pile on features without absorbing the decision cost fail in practice. This refactor shows the real product work is not adding more CSS or components but designing the agent's internal decision sequence so a user can say "make it look better" and get a finished, reviewed page.

Summary

A design skill for AI coding agents stopped bombarding users with configuration questions about themes, fonts, and components. Instead, it now scans the project context to generate an internal design brief and gets straight to building. The update introduces a 0–3 visual intensity scale that acts as a decoration budget, six complete page starters to replace ad-hoc component assembly, and automatic content drafting that respects a hard factual red line against inventing brand data. A new browser-based self-review step catches contrast failures and mobile overflow that static checks miss, and the default prompt was rewritten as a six-step executable workflow that requires re-rendering and re-checking until issues are actually fixed, not just reported.

Takeaways
A design brief is now generated internally by scanning project type, existing routes, reusable components, brand language, and the page's core action, eliminating the need for user configuration.
Visual intensity is framed as a 0–3 decoration budget: token-level adjustments, restrained editorial decoration, distinct cultural structures, or full dramatic ornament.
Six page starters (brand landing, product launch, dashboard, exhibition, festival, long-form editorial) provide complete structural templates with real copy, image placeholders, and responsive breakpoints.
Content drafts are auto-filled per page type, but the system is prohibited from fabricating awards, sales figures, endorsements, or historical claims.
The browser review step opens both desktop and 375px mobile views, catches issues like a 3.22:1 contrast ratio or 359px horizontal overflow, and requires code fixes plus re-rendering.
The default prompt was replaced with a six-step workflow that mandates re-checking after fixes; finding a problem no longer counts as completion.
An independent test with a fresh agent instance produced a working tea-brand landing page but exposed that the agent stopped after reporting issues instead of fixing them, prompting a harder rule and a `checksPassed` metric.
Conclusions

Capability accumulation without decision-cost absorption is the core failure mode for AI design tools: users want outcomes, not a product-manager certification in the tool's domain.

Framing visual intensity as a budget rather than a component picker gives the agent a transferable constraint that works across themes and page types without exposing implementation details.

Static code checks are insufficient for visual QA; real browser rendering at target breakpoints surfaces contrast, overflow, and attention-hierarchy problems that linting cannot see.

Agents interpret "review and fix" as "report findings and stop" unless the instruction explicitly ties problem discovery to a mandatory re-render-and-recheck loop.

Content scaffolding with a strict factual red line is a practical middle ground: structure can be guessed, but brand facts cannot be invented without corrupting trust.

Concepts & terms
Design brief (internal)
A short, agent-generated summary of the project context, page type, target user, core CTA, theme choice, and visual intensity level, used to guide page generation without exposing decisions to the user.
Visual intensity / decoration budget
A 0–3 scale that controls how much cultural ornamentation an agent applies, ranging from token-only adjustments to full dramatic decoration, replacing the need for users to name specific components.
Page Starter
A complete page template with real copy structure, image placeholders, and responsive layouts, giving the agent a proven structural starting point instead of assembling a page from isolated components.
Browser self-review loop
A workflow step where the agent opens the generated page in a browser at desktop and mobile widths, inspects it against visual rules, fixes found issues, re-renders, and re-checks until all pass.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗