hjemmesidekongen/design-to-code-patterns
plugins/smedjen/skills/design-to-code-patterns/SKILL.md
Translating design specs into frontend components — design token consumption, spacing/typography/color systems, responsive breakpoints, component decomposition from mockups, and design-code handoff conventions.
development
Updated Apr 5, 2026
$ install --global
skillsauthnpx skillsauth add hjemmesidekongen/ai design-to-code-patternsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 5, 2026, 5:27 PM24.0s2 files scanned
SKILL.md
- name:
- design-to-code-patterns
- description:
- >
- user_invocable:
- false
- interactive:
- false
- model_tier:
- senior
- depends_on:
- []
- reads:
- []
- writes:
- []
- type:
- data_validation
- - name:
- spacing_scale_consistent
- verify:
- Spacing uses scale values (4, 8, 12, 16, 24, 32, 48, 64), not arbitrary numbers
- fail_action:
- Snap spacing to the nearest scale value
- on_fail:
- Implementation drifts from design system — fix before shipping
- on_pass:
- Code faithfully implements the design spec
- origin:
- smedjen
- inspired_by:
- original + design system best practices
- ported_date:
- 2026-03-10
- iteration:
- 1
- changes:
- Original knowledge skill bridging design and code
design-to-code-patterns
Design Token Consumption
Never hardcode colors, spacing, fonts, or shadows. Reference design tokens via CSS custom properties (var(--color-primary-500)) or utility classes. Token categories: color (palette + semantic), typography (family, size, weight, line-height), spacing (4px base scale), shadows, radii, breakpoints. If the design system provides tokens, consume them. If not, extract them from the design file first.
Spacing System
Base unit: 4px. Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96. All spacing (padding, margin, gap) snaps to scale values. Vertical rhythm: line-height multiples of the base unit. Component internal spacing is smaller (8-16px). Section spacing is larger (48-96px). Never use arbitrary pixel values.
Typography Scale
Use a type scale (e.g., 12, 14, 16, 18, 20, 24, 30, 36, 48, 60px). Each size has a corresponding line-height and letter-spacing. Map semantic names: text-xs through text-6xl. Headlines: tighter letter-spacing (-0.01 to -0.02em). Body: default tracking. Use 2-3 font weights max (regular, medium, bold).
Component Decomposition
Read the design top-down: page → sections → cards/groups → elements. Each visual group that repeats or has distinct state becomes a component. Props mirror design variants (size, variant, color). Slot patterns for flexible content areas. Component names match the design system naming.
Responsive Implementation
Mobile-first: base styles are mobile, layer up with min-width queries. Named breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Grid: 4 cols mobile → 8 cols tablet → 12 cols desktop. Touch targets: 44px minimum. Check the design at each breakpoint — don't assume intermediate states.
Color System
Palette: 10-step scales (50-950) per hue. Semantic tokens: --color-primary, --color-error, --color-success, --color-text-primary, --color-bg-surface. Dark mode: swap semantic tokens, not palette values. Contrast: 4.5:1 minimum for text (WCAG AA). Never reference palette values directly in components — use semantic tokens.
See references/process.md for token extraction workflow, component mapping examples, handoff checklists, and responsive grid patterns.
Related Skills
hjemmesidekongen/brand-strategy
development
VerifiedTrustedCommunity
Creates a brand from scratch through market research and interactive sparring. Runs competitive research via Perplexity, then guides the user through positioning, audience, voice, values, and content pillars. Produces the full brand guideline set at .ai/brand/{name}/. Use when building a new brand, defining brand strategy for a product, or when /våbenskjold:create is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-loader
testing
VerifiedTrustedCommunity
Loads brand guidelines from .ai/brand/{name}/ and makes them available to the current context. Progressive disclosure: L1 confirms brand exists, L2 loads summary, L3 loads specific files on demand. Use when a downstream skill or user needs brand context, or when /våbenskjold:apply is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-evolve
documentation
VerifiedTrustedCommunity
Guided reinvention of an existing brand guideline. Loads current brand from .ai/brand/{name}/, identifies what to keep vs change, and walks the user through targeted evolution. Preserves brand equity while updating positioning, voice, or values. Use when refreshing a brand or when /våbenskjold:evolve is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-audit
development
VerifiedTrustedCommunity
Codifies an existing brand from materials, samples, and references. Analyzes provided content to extract voice patterns, values, and positioning. Produces the same guideline format as brand-strategy. Use when a brand already exists but isn't documented, or when /våbenskjold:audit is invoked.
SKILL.mdUpdated Apr 5, 2026