该技能用于在智能体生成前端界面时提供统一的设计方向，覆盖布局结构、视觉识别与动效编排，使产出更像经过设计推敲的成品，而非通用模板堆叠。
主要能力与要求：默认实现栈为 Tailwind CSS，用其处理布局、间距、字体、状态与响应式；仅当用户明确要求其他技术栈时才切换。组件可参考 UIverse、FlyonUI（https://flyonui.com/）、daisyUI，但只能作为起点，导入的样式需按当前视觉主张改写，不得整页使用库默认外观。在 JS/TS 环境中，排版敏感场景默认用 @chenglou/pretext 做文本测量，安装命令为：npm install @chenglou/pretext，用 prepare() + layout() 测试候选宽度与行数，复杂组合用 prepareWithSegments() + walkLineRanges()；若目标环境是静态 HTML、仅 CDN 或非 JS 构建，则跳过 pretext，改用 clamp()、max-width、断点等 CSS 约束。
工作流程分四步：A 结构（布局原型、漏斗顺序、区块职责）、B 风格（字体、色彩能量、表面语言、图像模式）、C 动效（按区块职责映射、强度随语境）、D 审查（反模式与质量门）。动效必须由布局与区块意图推导，不能当作通用装饰。技能要求生成前先产出 3 个差异明显的概念并按层级清晰度、独特性、产品契合度、转化准备度、实现可行性评分，选最高分构建；多项硬性约束用于避免“AI 网站风格”，如禁止通用 hero 加三卡特性带作为主结构、限制同类卡片重复出现、要求每页至少 3 个定制组件与 2 个定制动效模式、至少 30% 区块采用非标准网格构图。内容深度上默认输出多页站点（产品/商业网站约 6-10 页），落地页通常 8-14 个区块并承载核心叙事，另附功能、用例、定价、关于、联系等支撑页。使用限制：以上为技能内规定的设计流程与约束，具体效果取决于目标项目；官方未提供价格、支持平台、版本等额外信息。