用途：该技能面向需要构建 Web 组件、页面、应用或界面的场景，目标是产出独特、可运行、生产级的前端代码，并避免通用化的“AI 生成”审美。
主要能力：在编码前先进行设计思考，明确用途、受众、技术约束与差异化点，并选定一个明确的美学方向（如极简、极繁、复古未来、自然、奢华、编辑杂志风、粗野主义等）。随后用 HTML/CSS/JS、React、Vue 等实现可运行代码，强调视觉冲击力、整体一致性与细节打磨。
设计要点：字体上避免 Arial、Inter 等通用字体，选择有辨识度的展示字体搭配精致正文字体；用 CSS 变量统一色彩与主题；动效优先 CSS 方案，React 场景可用 Motion 库，重视页面加载的编排式揭示与滚动、悬停交互；布局上鼓励非对称、重叠、斜向流动与打破网格；背景与视觉细节可使用渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰边框、自定义光标等。明确要求避免紫色渐变白底、可预测布局等陈词滥调，并避免跨次生成收敛到相同选择。
使用方式：用户提供前端需求后调用该技能。在 website-rebuild、local-business-rebuild、azerbaijan-website-build 等构建流程中，需额外产出 DESIGN.md，格式规范见 00-design-references/design-md-format.md，真实品牌参考见 00-design-references/references/by-aesthetic/；各章节生成步骤可参考 design-system-generator 技能。DESIGN.md 采用 9 段结构：视觉主题、调色板、排版、组件样式、布局、深度/层级、应做/不应做、响应式、智能体提示指南。
适用场景：需要高设计质量、有明确美学主张的 Web 界面构建，以及需要将设计决策结构化传递给其他智能体或后续会话的构建流水线。
限制：资料未提供具体收费、价格、平台支持范围与效果保证；实现复杂度需与美学愿景匹配，极繁设计需要更复杂的代码与动效，极简设计则需克制与精确。具体安装命令与运行环境暂未提供。