메뉴
创建具有辨识度、production-grade 且高设计质量的前端界面。当用户要求构建 web components、pages、artifacts、posters 或 applications 时使用该 skill，例如 websites、landing pages、dashboards、React components、HTML/CSS layouts，或需要 styling / beautifying 任意 web UI 时。生成有创意、精致且避免通用 AI 审美的代码和 UI 设计。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | frontend-design |
| description | 创建具有辨识度、production-grade 且高设计质量的前端界面。当用户要求构建 web components、pages、artifacts、posters 或 applications 时使用该 skill，例如 websites、landing pages、dashboards、React components、HTML/CSS layouts，或需要 styling / beautifying 任意 web UI 时。生成有创意、精致且避免通用 AI 审美的代码和 UI 设计。 |
| license | Complete terms in LICENSE.txt |
| version | 0.1.0 |
该 skill 指导创建具有辨识度、production-grade 的前端界面，避免通用 “AI slop” 审美。实现真实可运行代码，并对美学细节和创意选择保持极高关注。
用户会提供前端需求：要构建的 component、page、application 或 interface。用户也可能提供用途、受众或技术约束。
编码前，先理解上下文并选择一个 bold 的美学方向：
如果项目已有设计约束，优先级为当前 plan / PRD 的 UI 决策，其次是项目级 hello-scholar/DESIGN.md 或等价设计文档，最后才是本 skill 的通用美学建议。不要为了展示技巧覆盖已有产品语言。
CRITICAL：选择清晰的概念方向并精确执行。大胆的 maximalism 和克制的 refined minimalism 都可以成立，关键是 intentionality，而不是 intensity。
然后实现工作代码（HTML/CSS/JS、React、Vue 等），要求：
重点关注：
绝不要使用通用 AI 生成审美，例如过度使用的字体族（Inter、Roboto、Arial、system fonts）、陈词滥调配色（尤其白底紫色渐变）、可预测布局和组件模式，以及缺乏上下文个性的 cookie-cutter design。
要创造性解读需求，做出真正为上下文设计的意外选择。不同设计之间不应重复。可在 light/dark themes、不同字体和不同美学之间变化。不要在多次生成中收敛到常见选择（例如 Space Grotesk）。
IMPORTANT：让实现复杂度匹配审美愿景。Maximalist designs 需要更丰富的动画和效果代码。Minimalist 或 refined designs 则需要克制、精确，以及对 spacing、typography 和微妙细节的细致把控。优雅来自把愿景执行到位。
记住：Claude 能做出非常有创造力的作品。不要保守，展示当你跳出框架并完全投入一个独特愿景时真正能创造出的东西。
Use when the user asks to generate or refresh an architecture map, structure diagram, core call flow, local viewer assets, or runs ~map. Produces hello-scholar native architecture-map.json plus compact Markdown and Mermaid companion artifacts.
Use when the user asks to open the architecture viewer, view diagrams, inspect node evidence, export the local architecture map, or troubleshoot hello-scholar map view/export behavior.
实验分析命令，基于 experiment package、runs、metrics 和 evidence 形成结果解释与下一轮实验计划。
实现命令，把 plan package、change record 或 experiment package 落成代码、配置、文档或实验变更。
Use only when the user explicitly types ~map. Generates or refreshes the hello-scholar native architecture map by invoking the architecture-map workflow, then validates and points to the local viewer.
用于涉及编写或修改源码的日常编码任务。
