{"slug": "frontend-design", "name": "frontend-design", "category": "ai-coding", "category_name": "AI coding tools", "description": "", "recommenders": 5, "commenters": 8, "warners": 2, "score": 2.68, "rising": -1.64, "first": "2025-12-07", "latest": "2026-08-17", "why": "You really have to a) use Opus and b) use the frontend-design skill for decent results.", "why_is_quote": true, "has_verdict": false, "sentiment": {"recommend": 5, "neutral": 1, "compare": 0, "warn": 3}, "spark": [0, 1, 0, 2, 0, 0, 0, 2, 0, 0, 0, 0], "listed": true, "loved": [], "caveat": "", "short_quote": "You really have to a) use Opus and b) use the frontend-design skill for decent results.", "kind": "", "icon": true, "domain": null, "github_repo": "github.com/anthropics/claude-code", "official_url": "", "pricing": "", "aliases": ["frontend-design", "frontend-design skill", "frontend-design plugin"], "verdict": null, "praise": [{"label": "", "summary": "", "quotes": [{"id": 776119217, "item_id": 48507451, "url": "https://news.ycombinator.com/item?id=48507451", "by": "lherron", "date": "2026-06-12", "version": null, "stance": "recommend", "quote": "You really have to a) use Opus and b) use the frontend-design skill for decent results.", "excerpt": "You really have to a) use Opus and b) use the frontend-design skill for decent results. https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md", "context": "", "use_case": "less sloppy AI front end", "switched_from": "", "story": "Slightly reducing the sloppiness of AI generated front end"}, {"id": 775613264, "item_id": 48475829, "url": "https://news.ycombinator.com/item?id=48475829", "by": "ageitgey", "date": "2026-06-10", "version": null, "stance": "recommend", "quote": "Anthropic's own frontend-design skill attempts to do that.", "excerpt": "Anthropic's own frontend-design skill attempts to do that. You can install it in Claude Code, or you can tweak it to be closer to your own style: https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md But what I find works best is to point Claude at a design system documentation website (your own company's or another public source) and tell it to use that design st", "context": "", "use_case": "", "switched_from": "", "story": "All 9,300 Japanese train station, animated by the year it opened (1872\u20132026)"}, {"id": 753198129, "item_id": 47074883, "url": "https://news.ycombinator.com/item?id=47074883", "by": "dweldon", "date": "2026-02-19", "version": null, "stance": "recommend", "quote": "install the frontend-design plugin (it's in the official plugins list now)", "excerpt": "I got some ideas from this t3\u2024gg video that work pretty well for me: https://youtu.be/f2FnYRP5kC4?si=MzMypopj3YahN_Cb The main trick that helps is to install the frontend-design plugin (it's in the official plugins list now) and ask Claude to generate multiple (~5) designs. Find what you like, and then ask it to redesign another set based on your preferences... or just start iterating on one if you see something that", "context": "", "use_case": "UI design with Claude", "switched_from": "", "story": "Ask HN: How do you employ LLMs for UI development?"}, {"id": 753186673, "item_id": 47074167, "url": "https://news.ycombinator.com/item?id=47074167", "by": "sama004", "date": "2026-02-19", "version": null, "stance": "recommend", "quote": "the frontend-design skill helps a lot too", "excerpt": "for claude code specifically, the frontend-design skill helps a lot too https://github.com/anthropics/skills/tree/main/skills/frontend-design", "context": "", "use_case": "frontend UI generation", "switched_from": "", "story": "Ask HN: How do you employ LLMs for UI development?"}, {"id": 738938641, "item_id": 46183665, "url": "https://news.ycombinator.com/item?id=46183665", "by": "CharlesW", "date": "2025-12-07", "version": null, "stance": "recommend", "quote": "Using https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design with style-supporting instructions and context would've improved the outcome", "excerpt": "Using https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design with style-supporting instructions and context would've improved the outcome as well.", "context": "", "use_case": "", "switched_from": "", "story": "I failed to recreate the 1996 Space Jam website with Claude"}]}], "caveats": [{"label": "", "summary": "", "quotes": [{"id": 789288992, "item_id": 49330562, "url": "https://news.ycombinator.com/item?id=49330562", "by": "DaiPlusPlus", "date": "2026-08-17", "version": null, "stance": "warn", "quote": "This is all quite painful to read.", "excerpt": "My exposure to Claude-produced UIs is limited, but I have started to notice certain design trends they tend to have in-common, which might be becoming hallmarks of AI-produced UIs - the same way we've started noticing the clich\u00e9s of low-effort LLM-generated text. FWIW, the summary-description[1] of \"frontend-design\"[2] gives me a few things to pick at: > create polished code Methinks only if you're using it with a ve", "context": "", "use_case": "Claude UI design skill", "switched_from": "", "story": "GPT 5.6 Sol is the best \"vision\" model OpenAI ever released"}, {"id": 789287280, "item_id": 49330455, "url": "https://news.ycombinator.com/item?id=49330455", "by": "rafram", "date": "2026-08-17", "version": null, "stance": "warn", "quote": "It\u2019s placebo at best.", "excerpt": "Have you actually read the frontend design skill? It\u2019s placebo at best. Very short and barely focused on design: https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md", "context": "", "use_case": "", "switched_from": "", "story": "GPT 5.6 Sol is the best \"vision\" model OpenAI ever released"}, {"id": 784611936, "item_id": 49038246, "url": "https://news.ycombinator.com/item?id=49038246", "by": "rafram", "date": "2026-07-24", "version": null, "stance": "warn", "quote": "It doesn't say what people think it does.", "excerpt": "You should read their frontend design skill [1], which lots of guides recommend blindly, in classic LLM cargo-cult fashion. It doesn't say what people think it does. [1]: https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md", "context": "", "use_case": "Frontend design guidance", "switched_from": "", "story": "Claude Cookbook"}]}], "who": [], "tags": [], "use_cases": ["claude ui design skill", "frontend design guidance", "less sloppy ai front end", "ui design with claude", "frontend ui generation"], "compared": [{"slug": "claude", "name": "Claude", "co": 3, "switched_from": 0, "switched_to": 0}, {"slug": "claude-code", "name": "Claude Code", "co": 3, "switched_from": 0, "switched_to": 0}], "makers": [], "threads": [{"url": "https://news.ycombinator.com/item?id=49329575", "title": "GPT 5.6 Sol is the best \"vision\" model OpenAI ever released", "mentions": 2}, {"url": "https://news.ycombinator.com/item?id=47073838", "title": "Ask HN: How do you employ LLMs for UI development?", "mentions": 2}, {"url": "https://news.ycombinator.com/item?id=46183294", "title": "I failed to recreate the 1996 Space Jam website with Claude", "mentions": 2}, {"url": "https://news.ycombinator.com/item?id=49031409", "title": "Claude Cookbook", "mentions": 1}, {"url": "https://news.ycombinator.com/item?id=48504912", "title": "Slightly reducing the sloppiness of AI generated front end", "mentions": 1}, {"url": "https://news.ycombinator.com/item?id=48475100", "title": "All 9,300 Japanese train station, animated by the year it opened (1872\u20132026)", "mentions": 1}], "sentiment_by_month": {"2025-11": {}, "2025-12": {"recommend": 1, "neutral": 1}, "2026-01": {}, "2026-02": {"recommend": 2}, "2026-03": {}, "2026-04": {}, "2026-05": {}, "2026-06": {"recommend": 2}, "2026-07": {"warn": 1}, "2026-08": {"warn": 2}, "2026-09": {}, "2026-10": {}}, "versions": [], "version_unnamed": 0, "family_ref": null, "runs_on": null, "lines": [], "quotes": [{"id": 789288992, "item_id": 49330562, "url": "https://news.ycombinator.com/item?id=49330562", "by": "DaiPlusPlus", "date": "2026-08-17", "version": null, "stance": "warn", "quote": "This is all quite painful to read.", "excerpt": "My exposure to Claude-produced UIs is limited, but I have started to notice certain design trends they tend to have in-common, which might be becoming hallmarks of AI-produced UIs - the same way we've started noticing the clich\u00e9s of low-effort LLM-generated text. FWIW, the summary-description[1] of \"frontend-design\"[2] gives me a few things to pick at: > create polished code Methinks only if you're using it with a ve", "context": "", "use_case": "Claude UI design skill", "switched_from": "", "story": "GPT 5.6 Sol is the best \"vision\" model OpenAI ever released"}, {"id": 789287280, "item_id": 49330455, "url": "https://news.ycombinator.com/item?id=49330455", "by": "rafram", "date": "2026-08-17", "version": null, "stance": "warn", "quote": "It\u2019s placebo at best.", "excerpt": "Have you actually read the frontend design skill? It\u2019s placebo at best. Very short and barely focused on design: https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md", "context": "", "use_case": "", "switched_from": "", "story": "GPT 5.6 Sol is the best \"vision\" model OpenAI ever released"}, {"id": 784611936, "item_id": 49038246, "url": "https://news.ycombinator.com/item?id=49038246", "by": "rafram", "date": "2026-07-24", "version": null, "stance": "warn", "quote": "It doesn't say what people think it does.", "excerpt": "You should read their frontend design skill [1], which lots of guides recommend blindly, in classic LLM cargo-cult fashion. It doesn't say what people think it does. [1]: https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md", "context": "", "use_case": "Frontend design guidance", "switched_from": "", "story": "Claude Cookbook"}, {"id": 776119217, "item_id": 48507451, "url": "https://news.ycombinator.com/item?id=48507451", "by": "lherron", "date": "2026-06-12", "version": null, "stance": "recommend", "quote": "You really have to a) use Opus and b) use the frontend-design skill for decent results.", "excerpt": "You really have to a) use Opus and b) use the frontend-design skill for decent results. https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md", "context": "", "use_case": "less sloppy AI front end", "switched_from": "", "story": "Slightly reducing the sloppiness of AI generated front end"}, {"id": 775613264, "item_id": 48475829, "url": "https://news.ycombinator.com/item?id=48475829", "by": "ageitgey", "date": "2026-06-10", "version": null, "stance": "recommend", "quote": "Anthropic's own frontend-design skill attempts to do that.", "excerpt": "Anthropic's own frontend-design skill attempts to do that. You can install it in Claude Code, or you can tweak it to be closer to your own style: https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md But what I find works best is to point Claude at a design system documentation website (your own company's or another public source) and tell it to use that design st", "context": "", "use_case": "", "switched_from": "", "story": "All 9,300 Japanese train station, animated by the year it opened (1872\u20132026)"}, {"id": 753198129, "item_id": 47074883, "url": "https://news.ycombinator.com/item?id=47074883", "by": "dweldon", "date": "2026-02-19", "version": null, "stance": "recommend", "quote": "install the frontend-design plugin (it's in the official plugins list now)", "excerpt": "I got some ideas from this t3\u2024gg video that work pretty well for me: https://youtu.be/f2FnYRP5kC4?si=MzMypopj3YahN_Cb The main trick that helps is to install the frontend-design plugin (it's in the official plugins list now) and ask Claude to generate multiple (~5) designs. Find what you like, and then ask it to redesign another set based on your preferences... or just start iterating on one if you see something that", "context": "", "use_case": "UI design with Claude", "switched_from": "", "story": "Ask HN: How do you employ LLMs for UI development?"}, {"id": 753186673, "item_id": 47074167, "url": "https://news.ycombinator.com/item?id=47074167", "by": "sama004", "date": "2026-02-19", "version": null, "stance": "recommend", "quote": "the frontend-design skill helps a lot too", "excerpt": "for claude code specifically, the frontend-design skill helps a lot too https://github.com/anthropics/skills/tree/main/skills/frontend-design", "context": "", "use_case": "frontend UI generation", "switched_from": "", "story": "Ask HN: How do you employ LLMs for UI development?"}, {"id": 738944464, "item_id": 46184029, "url": "https://news.ycombinator.com/item?id=46184029", "by": "aidos", "date": "2025-12-07", "version": null, "stance": "neutral", "quote": "the sort of context that would improve the outcome", "excerpt": "Is the skill effectively just adding a little extra context here though? Doesn\u2019t strike me as the sort of context that would improve the outcome. https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md", "context": "", "use_case": "", "switched_from": "", "story": "I failed to recreate the 1996 Space Jam website with Claude"}, {"id": 738938641, "item_id": 46183665, "url": "https://news.ycombinator.com/item?id=46183665", "by": "CharlesW", "date": "2025-12-07", "version": null, "stance": "recommend", "quote": "Using https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design with style-supporting instructions and context would've improved the outcome", "excerpt": "Using https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design with style-supporting instructions and context would've improved the outcome as well.", "context": "", "use_case": "", "switched_from": "", "story": "I failed to recreate the 1996 Space Jam website with Claude"}]}