用途：创建具辨识度、可直接用于生产的前端界面，避免常见的通用AI审美，适用于组件、页面、应用或界面开发。
主要能力：两条输入工作流。若有截图/图片/设计参考，先提取设计规范（颜色十六进制、字体字号字重、间距尺度、布局与视觉层级），写入 docs/design-guidelines/extracted-design.md，再按提取规范实现代码并做视觉比对验证；若无截图，则先进行设计思考（目的、基调、技术约束、差异化），再实现 HTML/CSS/JS、React、Vue 等可用代码。审美关注点包括：选择有特色的字体而避免 Inter、Roboto、Arial 等通用字体；用 CSS 变量保持配色一致；用动效与微交互强化关键节点；采用非对称、重叠、破格等空间构图；用渐变网格、噪点、纹理、层叠透明、装饰边框等营造氛围。参考资料包括 references/design-extraction-overview.md、asset-generation.md、visual-analysis-overview.md、technical-overview.md 等，截图工作流执行前须先读对应文档。
使用方式：需在 Codex 中以 $skill-name 调用；执行前先建立并同步任务跟踪，按声明顺序执行各步骤，每步需给出简要证据或跳过原因；不可在不经用户批准时跳过、重排或合并步骤。涉及前端或界面改动时，须先阅读 frontend-patterns-reference.md、scss-styling-guide.md、design-system/README.md；样式遵循 BEM 命名、使用变量或设计令牌、嵌套不超过三层。
限制：资料未说明该技能的授权方式、收费或价格、支持的框架版本与平台要求，这些暂未提供；项目文档缺失或过期时的处理路径依赖 $project-init 等技能，缺少 Codex 镜像或 AGENTS.md 时应请用户运行 $sync-codex，不自动执行。