Frontend Design Skill
Steers AI away from generic template aesthetics toward distinctive, production-grade interfaces — components, pages, posters, and full web apps that actually look designed.
Pure prompt-based design guidance: no permissions, no scripts, no external effects or sensitive-data flows, so the risk surface is minimal; deducted for recommending external fonts/Motion library dependencies without supply-chain or provenance guidance, and the frontmatter's 'Complete terms in LICENSE.txt' does not exactly match the repo's MIT LICENSE file, with attribution relying on an unverified publisher.
The SKILL.md is internally consistent with no contradictions, and as a prompt skill has nothing unrunnable; deducted because static review cannot reproduce key paths, the skill has no tests or abnormal-input handling of its own, and failure feedback depends entirely on the host model.
The description clearly enumerates trigger scenarios (components, pages, posters, styling) with positive and negative examples, giving reasonably precise semantic triggering; deducted for no declared boundaries or non-fit ranges (e.g., accessibility audits, performance work), and no assessment of Chinese-language content or mainland-China reachability of external font loading.
Well-structured, layered documentation (design thinking → aesthetics guidelines → anti-patterns) that reads cleanly; deducted for no skill-level version/changelog, a license reference that does not match the actual LICENSE filename, and no FAQ, known-limitation disclosure, or maintenance/update path for the skill itself.
The core task (producing distinctive frontend code) is well-guided at the prompt level with a clear anti-generic-aesthetics goal; deducted because static review cannot verify outputs are directly usable, design quality is a qualitative claim with no representative output evidence, and marginal value depends on the host model.
Only repository primary material is auditable; the CI and test suite target the clawteam CLI, not this skill path, and the skill's effectiveness claims ('avoids AI slop') have no checkable corroboration; deducted for absence of third-party validation of skill outputs and no separation of fact from inference.
- This is a pure prompt-guidance skill; its design-effectiveness claims were not execution-verified — this is a static review only.
- Frontmatter cites 'LICENSE.txt' while the repository ships an MIT LICENSE file; the license reference is imprecise.
- The skill recommends external fonts and the Motion library without supply-chain/loading-source checks; external font resources may be unreachable from mainland-China networks — verify before use.
- The skill itself has no version number or changelog, making future changes hard to track.
- Publisher is unverified; rely on repository content for attribution.
What does this skill do, and when should you use it?
This is one of four skills bundled in the HKUDS/ClawTeam repository (an Agent Swarm Intelligence project, MIT-licensed), located at .agents/skills/frontend-design/. It is a pure instruction-based design methodology rather than a code tool: it guides the AI through a design-thinking pass — purpose, a bold aesthetic direction, differentiation — before writing any code, then produces production-grade, runnable HTML/CSS/JS or React output. The skill ships detailed aesthetic guidelines covering typography pairing, color systems, motion choreography, spatial composition, and background/atmosphere details, plus an explicit blacklist of generic AI aesthetics (Inter/Roboto fonts, purple gradients on white, cookie-cutter layouts). It works with any Agent Skills-compatible client and carries no runtime dependencies or scripts.
Reads the user's frontend request (component, page, application, poster, or UI beautification, optionally with purpose, audience, and technical constraints); runs a design-thinking step that commits to one clear aesthetic direction from a menu including brutalist, maximalist, retro-futuristic, editorial/magazine, luxury, and soft/pastel; then writes working production code (HTML/CSS/JS, React, Vue, etc.) applying concrete guidelines: distinctive characterful font pairings (Inter, Arial, and system fonts explicitly banned), cohesive color themes managed via CSS variables with dominant colors plus sharp accents, CSS-only animations or the Motion library for staggered page-load reveals, scroll triggers, and surprising hover states; unexpected asymmetric layouts with overlap and grid-breaking; and atmospheric backgrounds built from gradient meshes, noise textures, geometric patterns, custom cursors, and grain overlays. It instructs the model to vary choices across generations so no two outputs converge on the same look.
- A developer who needs a landing page or product site that doesn't look AI-generated and wants deployable code, not a throwaway prototype
- A team building full-stack apps with CLI coding agents (e.g. Claude Code) who wants the frontend portions to come out with real design quality instead of template sameness
- A designer or indie developer who wants an existing web UI restyled by AI, optionally steered toward a named aesthetic like brutalism or editorial magazine style
- Anyone generating posters, dashboards, or individual React components who wants a clear visual signature people will remember
- A maintainer of multiple projects who needs visually varied output so different projects don't receive identical-looking designs
What are this skill's strengths and limitations?
- Guidelines are concretely actionable: specific rules on fonts, color structure, motion choreography, and layout — not vague 'make it pretty' advice
- Explicit anti-pattern blacklist (no Inter/Roboto, no purple-gradient-on-white, no cookie-cutter components) targets the exact failure modes of AI-generated UIs
- Requires style variation across generations, useful when producing interfaces for multiple projects
- Pure instruction, zero dependencies: no scripts or platform lock-in, trivially portable to any Agent Skills client
- Emphasizes runnable production-grade code with implementation complexity matched to the aesthetic vision
- Guidance only — no reusable templates, component library, or scripts, so results depend heavily on the model's own execution quality
- SKILL.md references a LICENSE.txt whose contents are not shown; the repo is MIT but the skill's own license terms are not displayed in the source
- No quantitative evaluation or test evidence that the 'avoid generic AI aesthetics' goal is actually met — it is a subjective quality target
- Mentions the Motion library for React animations without specifying versions or install steps
- Unrelated to ClawTeam's swarm orchestration capabilities — the README's multi-agent features do not belong to this skill
How do you install this skill?
The skill ships with the ClawTeam repository. Installing ClawTeam installs its bundled skills for detected clients: pip install clawteam, or run scripts/install_clawteam.sh from a source checkout (installs into ~/.clawteam/.venv and links the clawteam command). The README states the install scripts install bundled skills for detected clients but does not document a standalone manual install path for frontend-design specifically; following general Agent Skills convention you would copy the .agents/skills/frontend-design/ folder into your client's skills directory (e.g. ~/.claude/skills/frontend-design) — this exact step is not explicitly documented in the source.
How do you use this skill?
In a skill-capable client, the skill activates when a frontend request appears. Example trigger prompts: "Use this skill to build a dark, editorial-magazine-style SaaS landing page" or "Beautify the UI of this React component." The skill is instruction-only: no commands to run; the AI does design thinking first, then outputs code. It can also complement a frontend worker inside a ClawTeam swarm, though the SKILL.md itself contains no ClawTeam-specific orchestration instructions.
How does this skill compare with similar options?
The source names no direct competitors. The implicit comparison is against default AI frontend output without this skill — the skill positions itself explicitly as a corrective to generic AI aesthetics (Inter, purple gradients, templated layouts) — but no specific alternative project is cited.