agent-front-design
Frontend design blueprints with craftsmanship scoring, self-critique loops, and engineering handoff. Aesthetic intelligence against AI homogeneity. Use for: UI/UX design specs, design system creation, visual direction exploration, component design review, design-to-engineering handoff.
Best use case
agent-front-design is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Frontend design blueprints with craftsmanship scoring, self-critique loops, and engineering handoff. Aesthetic intelligence against AI homogeneity. Use for: UI/UX design specs, design system creation, visual direction exploration, component design review, design-to-engineering handoff.
Teams using agent-front-design should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/agent-front-design/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How agent-front-design Compares
| Feature / Agent | agent-front-design | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Frontend design blueprints with craftsmanship scoring, self-critique loops, and engineering handoff. Aesthetic intelligence against AI homogeneity. Use for: UI/UX design specs, design system creation, visual direction exploration, component design review, design-to-engineering handoff.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Frontend Design Excellence Produce stunning, implementable frontend designs. Break free from AI aesthetic defaults. Push every component from "functional" to "remarkable." ## Modes ### Explore Creative direction exploration. Generate 2-3 candidates with rationale and risks. No "publishable" conclusion. Read `references/aesthetic-intelligence.md` first. ### Production Converge to one implementable spec. Requires: 1. Choose one direction, reject alternatives with reasons 2. Full spec: color, typography, layout, component tree, state coverage 3. Run Critique (see below) — fix all 🔴 before delivery 4. Output quality score and release recommendation ### Critique Self-evaluation as a harsh design critic. Breaks you out of aesthetic comfort zones. **Auto-triggered** at end of Production. **User-triggered** anytime via "critique", "残酷审视", "review the design." Execute: read `references/critique-protocol.md`, run the full protocol. Default flow: Explore → Production (includes Critique) → Deliver. ## Reference Routing Read on demand, by task phase: | Phase | File | When | |-------|------|------| | Direction | `references/aesthetic-intelligence.md` | Always at start — the core | | Critique | `references/critique-protocol.md` | Production end, or user request | | Engineering | `references/design-system.md` | Defining tokens, modern CSS | | IA/Interaction | `references/page-patterns.md` | Page structure, states, flows | | Handoff | `references/engineering-handoff.md` | React/Vue delivery | ## Delivery Checklist Final output must include: 1. One primary direction + rejected alternatives with reasons 2. Color palette with OKLCH values and brand rationale 3. Typography pairing with contrast justification 4. Key page layouts (ASCII/wireframe) 5. Component tree with state boundaries 6. State coverage: `loading / empty / error / success / permission` 7. Critique report (or reason for skip) 8. Quality score and release recommendation 9. Accessibility checkpoints (contrast, keyboard, semantics) 10. Performance budget (LCP/INP/CLS targets)
Related Skills
web-scraper
Web scraper with SPA/JavaScript rendering, page interaction, and JS execution. Two-tier engine (HTTP → Playwright browser). Smart discovery, batch fetch, interactive content extraction, OpenAPI parsing. Use when read_url_content fails, SPA rendering needed, or page interaction required.
pm-toolkit
自然语言 → Mermaid 图表（16 种）+ 网页原型，本地 Web 面板实时预览/导出。
mobile-testing
Android/iOS automated testing: device management, app install, performance profiling, log analysis, screenshot comparison, Maestro E2E orchestration.
llm-agent-dev
LLM Agent engineering: pattern selection (12-mode matrix), data simulation, convergence iteration. Covers intent routing, function calling, ReAct, MCP, prompt chaining, guardrails, evaluation.
image-studio
AI image generation and editing: e-commerce templates (hero/banner/detail/lifestyle), image refinement (background replace/remove, enhance, retouch, style transfer), icon extraction (bg-removal + detect + smart crop with transparent output).
feishu-integration
Feishu (Lark) unified CLI for tasks, documents, wiki, bitable, messaging, approval, and Drive. Supports search/create/edit/publish/export across all modules. Use when reading/writing Feishu docs, searching docs or wiki, managing tasks, sending messages, creating approvals, exporting to Markdown, or any 飞书/Lark interaction.
es-analytics
Elasticsearch / SLS 只读数据分析：索引探索、mapping、聚合统计、日志搜索、时间序列、多 Profile。
doc-sentinel
Document-code change notification system: traceable doc-code binding via git tree hash, git-diff-driven reconciliation plans with confidence/risk metadata, and idempotent execution. Use when maintaining documentation freshness, detecting stale docs, or binding docs to source code.
coding-net-integration
Coding.net DevOps automation: MR lifecycle, CI operations (trigger/logs/stop), artifact registry, cross-project queries, remote file audit.
cnb-cool-integration
针对 cnb.cool 的云原生构建（CNB Build）：生成/修改 .cnb.yml 流水线、触发规则、 构建环境、runner 资源、缓存、环境变量、手动触发与调试。 在接入、迁移、优化或排查 CNB 构建配置时使用。
agent-task-orchestration
Task decomposition and multi-agent orchestration with retry, checkpoint recovery, and real-time monitoring. Mixed Codex/Claude Code engine. Parallel/sequential execution.
agent-swe-team
Multi-agent SWE team built on the Workshop model. Full-stack vertical workers, meeting room with @mention notification, private pipes, shared task board. Git worktree isolation, Leader-driven coordination. Mixed Codex/Claude Code engine. Use when a task needs engineering depth beyond a single agent. NOT for simple task parallelism (use agent-task-orchestration) or design discussions (use agent-brainstorm).