skills.rest
jokerman89
jokerman89COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-dna

Searches a curated design corpus and composes design-system recommendations with token emission and validation.

Updated May 27, 2026
Search Tags:#typography#accessibility#design system#color palette#design tokens#ui design#bm25 search
One-click install
npx skills add https://github.com/jokerman89/lintel --skill design-dna-jokerman89
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-dna
Source: https://github.com/jokerman89/lintel/tree/main/skills/design-dna
Command: npx skills add https://github.com/jokerman89/lintel --skill design-dna-jokerman89

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Visual design decisions made from model memory are inconsistent and often violate accessibility rules. This Skill grounds every style, palette, font, and layout choice in a curated, searchable corpus plus an explicit design profile, so UI work starts from verified data instead of guesswork. ## Core Features & Use Cases - BM25 corpus search: Query 84 UI styles, 161 WCAG-audited palettes, 161 product reasoning rules, 73 font pairings, 99 UX guidelines, and 16 per-stack rule files (React, Next.js, Vue, Flutter, and more) via stdlib-only Python scripts. - Design-system composition and persistence: Generate a complete recommendation (pattern, style, colors, typography, anti-patterns, checklist) and persist it as a MASTER.md plus per-page override files. - Profile resolution and token emission: Resolve the active design profile (default anthropic-default) and emit a three-layer design-tokens.css (primitive, semantic, component). - Output validation: Check rendered HTML against hard rules (contrast, focus visibility, no emoji icons) with exit-code gating. - Use Case: Before building a fintech dashboard, ask for a design system recommendation, then validate the resulting HTML page against the active profile before shipping. ## Quick Start Ask the agent to recommend a design system for a healthcare appointment app and validate the generated HTML against the active design profile.

Frequently Asked Questions about design-dna

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I search for UI styles and color palettes with this skill?▼

Run scripts/search.py with a natural-language query; the domain auto-detects whether you want styles, colors, typography, UX guidelines, or stack rules. It returns the top three BM25-ranked rows from the CSV corpus, token-budgeted for context.

How do I generate a complete design system recommendation?▼

Invoke search.py with the --design-system flag and a query combining product, industry, and tone keywords. It composes pattern, style, palette, typography, reasoning, anti-patterns, and a pre-delivery checklist, optionally persisting MASTER.md and per-page override files.

Does the search engine require external Python packages?▼

No, all scripts are stdlib-only by design as a portability contract. The BM25 implementation, CSV loading, and YAML profile parsing run on any Python 3 installation without pip installs.

What happens if python3 is not available in the environment?▼

The corpus is plain CSV, so the skill degrades gracefully: read or grep the relevant data file directly (styles.csv, colors.csv, typography.csv, and so on) and pick up to three relevant rows. Validation falls back to the review checklist in the frontend-design-review workflow.

How does the active design profile get resolved and overridden?▼

The profile resolves via the pack resolver's design.profile field, defaulting to anthropic-default when unset. Packs can ship their own profiles/<id>.yaml which takes precedence, and an explicit operator brief overrides both profile and corpus hits.

When should I not use this design retrieval skill?▼

Skip it for pure backend, API, or infrastructure work with no visual surface. It also does not extract brand identity from existing artifacts; that task belongs to the frontend-style-extract workflow.

Related Skills

Explore More Design & Creative Skills→
ivalmartivalmart
1

procgen-search

Search an indexed procgen corpus for semantically relevant papers with similarity scores.

Community
Intermediate
lync-cyberlync-cyber
133

penpot-bridge

Bridge Penpot design data with frontend code generation and token synchronization.

Community
Advanced
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
toddbadamstoddbadams

demo-design-tokens

Provide default design tokens for styling demo UI environments.

Community
Basic