Frontend design with OpenDesign integration: distinctive, production-grade interfaces
@nexu-io's adaptation of Anthropic's frontend-design skill for OpenDesign — commit to one aesthetic direction, avoid AI defaults, ship working responsive code with a design-system section
- What
- @nexu-io's adaptation of Anthropic's frontend-design skill for OpenDesign — commit to one aesthetic direction, avoid AI defaults, ship working responsive code with a design-system section
- Cost
- Free
- Needs
- a frontend build to design (the skill is design guidance the agent follows, not software to install)
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor — @nexu-io's adaptation of Anthropic's official frontend-design skill for OpenDesign (listed here with credit to both @nexu-io and the upstream @anthropics original). A workflow for shipping working frontend code with a clear design point of view instead of "make it nicer": understand the brief (audience, job, tone, constraints) before choosing the look; commit to one specific aesthetic direction (brutally minimal, editorial, luxury, playful, industrial, retro-futuristic, dense operational, calm enterprise) made concrete through typography, spacing, color, hierarchy, motion and component shape; design the real interface with honest content (controls, empty/loading/error states, tables, filters, navigation, responsive behavior — sample data labeled as sample, never invented claims); build production-grade code (existing framework conventions, semantic markup, keyboard access, visible focus, sensible contrast, CSS variables for tokens); then refine typography, color, layout, motion and details. Self-review before delivery: works at mobile and desktop widths, text fits its containers, hover/focus/active/disabled states exist, no obvious AI-generated tropes, one memorable quality. OpenDesign integration: when OpenDesign injects an active design system, it is the brand contract; injected craft checks (typography, color, anti-ai-slop) run before finishing; brand guidance wins over generic craft rules on conflict. Apache-2.0 licensed. Note: companion listings cover the same upstream skill from the original sources — « anthropics-claude-plugins-official-frontend-design » and « anthropics-claude-code-frontend-design ». Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh.
Version:
Install
Prerequisites: a frontend build to design (the skill is design guidance the agent follows, not software to install) Install "Frontend design with OpenDesign integration: distinctive, production-grade interfaces" for me. It gives my agent @nexu-io's adaptation of Anthropic's official frontend-design skill for OpenDesign: understand the brief, commit to one aesthetic direction, avoid AI-generated defaults, design the real interface with honest content (empty/loading/error states included), ship production-grade responsive accessible code, refine craft, and self-review before delivery; plus OpenDesign integration (active design system as brand contract, injected craft checks). Apache-2.0 licensed. Repository: https://github.com/nexu-io/open-design/blob/main/skills/frontend-design/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). Review the files for suspicious commands or credential handling; stop on any red flag and never assume the repository is safe. Tell me if anything looks off. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "frontend-design". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. describe the interface to build and any brand/design-system guidance; nothing else — it's a methodology). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.