scandinavian-design — Claude Code skill: features and setup
This skill guides interface work toward calm layouts, restrained monochrome styling, and clearer hierarchy. Use it to redesign a surface, review it, or explore prototype directions.
npx skills add ericzakariasson/scandinavian-design --skill scandinavian-design -a claude-codeWhat scandinavian-design does
The skill examines a requested interface in its product context, then guides changes around comprehension, navigation, accessibility, and hierarchy. It supports redesign, review without source edits, and a prototype mode that presents three distinct directions in an isolated setup. It also asks the agent to account for existing components, brand choices, responsive conventions, and the purpose of the surface.
Its visual approach pairs black-and-white foundations with restrained type, open spacing, and less ornament. That does not mean stripping every page back: information density and visual character still need to fit the product. A loud identity can lose meaning if the agent applies restraint mechanically. Available for Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode.
What it helps with
- clarify the hierarchy of a crowded page
- review navigation and accessibility
- remove decoration that competes with content
- compare visual directions before production changes
Example prompts for the agent
- Apply a Scandinavian visual approach to the account page and review its responsive layout.
- Review this interface without editing source files and rank the findings by importance.
- Create three distinct design directions in an isolated prototype; leave the production UI untouched.
How to install scandinavian-design
1Skills CLI (Vercel)
npx skills add ericzakariasson/scandinavian-design --skill scandinavian-design -a claude-code2Manually: put the files in place
~/.claude/skills/scandinavian-design/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/scandinavian-design/
1Skills CLI (Vercel)
npx skills add ericzakariasson/scandinavian-design --skill scandinavian-design -a codex2Manually: put the files in place
.agents/skills/scandinavian-design/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add ericzakariasson/scandinavian-design --skill scandinavian-design -a cursor2Manually: put the files in place
.cursor/skills/scandinavian-design/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install ericzakariasson/scandinavian-design scandinavian-design2Manually: put the files in place
.github/skills/scandinavian-design/SKILL.md1Skills CLI (Vercel)
npx skills add ericzakariasson/scandinavian-design --skill scandinavian-design -a gemini-cli2Platform CLI
gemini skills install https://github.com/ericzakariasson/scandinavian-design --path skills/scandinavian-designManually: put the files in place
.devin/skills/scandinavian-design/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add ericzakariasson/scandinavian-design --skill scandinavian-design -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about scandinavian-design
How do I install scandinavian-design in Claude Code?
Run npx skills add ericzakariasson/scandinavian-design --skill scandinavian-design -a claude-code. The skill file is placed at ~/.claude/skills/scandinavian-design/SKILL.md.
What does scandinavian-design do?
It guides interface redesign and review using restrained monochrome styling, clearer structure, and attention to accessibility. It can also produce separate prototype directions before production changes.
Can I explore designs without changing the production UI?
Yes. Ask for prototype mode: it creates three different directions in an isolated setup and leaves the production interface unchanged until you choose one.
