Frontend Design

Build a frontend with a deliberate visual direction held through palette, typography, structure, and texture, with on-screen strings that name real information rather than fabricated demo data or filler labels. Use when building or restyling a frontend.

154 stars 23 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add Ilm-Alan/frontend-design --skill frontend-design
Manual install
git clone --depth 1 https://github.com/Ilm-Alan/frontend-design.git /tmp/frontend-design
mkdir -p ~/.claude/skills
cp -r /tmp/frontend-design/. ~/.claude/skills/frontend-design

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Frontend Design Skill

Eight anchors. Each is a distinct aesthetic territory locked to specific CSS tokens. Pick one per brief. Match its tokens.

> **Reach for the unexpected. Fidelity to the anchor. Discipline on the content. Nothing left to default.**

---

## 1. How to work

Before writing code, run this sequence:

1. **Context** — Identify purpose, audience, domain, content density. State the problem in one sentence.
2. **Anchor** — Pick one. Lean unexpected. A Swiss punk record label, an Industrial florist, a Brutalist luxury watchmaker, an Aurora tax app, a Chaotic law firm, a Retro-Futuristic wedding photographer, an Organic trading terminal, a Lo-Fi luxury hotel — each more distinctive than its safe counterpart. Safe pairings produce generic work. Unexpectedness is surface-level — what a first-time viewer sees. Don't let "users are technical" or "it's really a data tool" route every brief to Industrial. State the choice and the reason in one line.
3. **Differentiator** — Define one memorable anchor-internal move: a signature interaction, a typographic gesture, a layout motif, or a material treatment. One sentence. Describable. Visible in the rendered output.
4. **System** — Match the chosen anchor's tokens exactly. Picking Swiss means white + sans + grid, not "some flavor of clean."
5. **Implementation** — Outline structure, then build. Content on screen is authored to the discipline in §2 — no fabrication, no filler, no themed replacement for standard UI copy.
Read the full skill on GitHub

Details

Skill name
frontend-design
Repository
Ilm-Alan/frontend-design
License
MIT
Repo updated
26 September 2026

FAQ

What does the Frontend Design skill do?

Build a frontend with a deliberate visual direction held through palette, typography, structure, and texture, with on-screen strings that name real information rather than fabricated demo data or filler labels. Use when building or restyling a frontend.

How do I install the Frontend Design skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Ilm-Alan/frontend-design --skill frontend-design. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Frontend Design popular?

It lives in Ilm-Alan/frontend-design, which has 154 GitHub stars and 23 forks.

Related skills

Brand System Builder

168

amirmushichge/brand-system-skill

Guides Lovart Agent from one visual reference to a coherent brand system, campaign assets, and packaging concepts through a gated creative-direction workflow.

Frontend & Design12

Blcaptain Style Skill

178

dososo/blcaptain-style-skill

当用户需要把内容（文章、笔记、截图、数据、产品说明）做成中文图文卡片组图时使用——小红书 / Rednote 3:4 竖图、公众号封面、社交卡。提供三套独家视觉语言（静纸 Still Paper本手记 / Signal Proof 证据层 / Bridge Canvas 跨平台桥），由 Claude 读懂内容、自己撰写 brief.json，交给确定性引擎渲染出第一眼惊艳、一眼可辨、国内开箱即用的图文组图。

Frontend & Design16

Aria Icons

103

LeulAria/Aria-Icons

Use when working with icons in any project. Search 1.4M icons, add them as source files (no giant dependency), migrate existing icon libraries, and run as an MCP server. Commands: `aria-icons search`, `aria-icons add`, `aria-icons get`, `aria-icons migrate`, `aria-icons doctor`.

Frontend & DesignIn 2 lists

Code Brand Film

181

nutllwhy/code-brand-film

Produce a short brand film or product promo (10-60s, typically 15s) entirely as code: one static HTML page with a paused GSAP timeline that a renderer seeks frame by frame, plus a music score synthesized in Python. Use when the user wants a 品牌宣传片, 广告片, 宣传动画, 产品短片, 发布会开场视频, brand film, promo video, product teaser, logo animation, or a generated ad spot — especially when they ask for 高级感 / 艺术感 / 电影感 / 别像模板, or when an existing video "looks like AI made it" or "too simple" and needs to be redone properly. Also use when a film already exists and needs a score, a soundtrack, background music, or 配乐

Frontend & Design23

Material Design 3 UI

159

skydashnet/material-design-3-ui-skill

Design, redesign, review, or implement user interfaces using Google Material Design 3 (M3), Material You, and optional Material 3 Expressive principles. Use for UI/UX screens, app flows, design systems, component selection, theming, responsive/adaptive layouts, accessibility audits, Figma-ready specifications, or developer handoff where Material Design 3 is required.

Frontend & Design12

Diorama

196

sloemo01/diorama

Use when building a pixel diorama in Three.js — one-prompt autonomous builds with staged systems, detailed props, real animation, and social/service choreography.

Frontend & Design15

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.