DESIGN.MD
How to use design.md
Enter any website URL
Paste a live website URL into the importer. design.md queues the page, loads the source, and prepares it for visual analysis.
Capture and inspect the page
The importer captures a screenshot, extracts assets, detects color and typography tokens, and reads layout cues from the website.
Generate DESIGN.md and HTML
The output includes a reusable DESIGN.md file and companion HTML preview with colors, typography, spacing, layout intent, and asset references.
Use it as prompt context
Paste the DESIGN.md into an AI builder prompt so generated UI follows the source site's design language instead of guessing from scratch.
DESIGN.MD · Portable design intelligence from any website
Make your vibe-coded
Website Beautiful
in 60 seconds
Paste a website you admire and generate a DESIGN.md file that helps your vibe-coded project inherit its polish, structure, and visual taste.
design.md collection
A focused set of design references from the collection.
FIELD REPORT
design.md ready
Generated artifacts and system profile
DESIGN.md
0 linesDesign Prompting Vocab
Last updated May 18, 2026Say less, mean more — the vocabulary that makes your prompts land.
Design Basics
Last updated May 17, 2026The laws, levels, and principles behind how design works — the theory that explains the practice.
Design Skills
Last updated May 17, 2026Coming soon.
Components
Last updated May 17, 2026Coming soon.
Learn
Last updated May 17, 2026Practical courses on using AI to level up your design practice.
Learn to use AI for Visual Design
Master prompting techniques that translate design intent into polished visuals. Go from vague ideas to production-ready UI direction using AI tools fluently.
- Generating color palettes and typography pairings
- Creating moodboards and visual design directions
- Writing prompts for layout, composition, and hierarchy
- Exporting and applying tokens from AI output
Learn to use AI for UI Design
Use AI to create screens, flows, components, states, and responsive layouts faster without losing design intent.
- Turning product requirements into interface ideas
- Generating screen-level layouts
- Creating component variations
- Designing empty, loading, error, and success states
Learn to use AI for UX Design
Use AI as a thinking partner for journeys, flows, edge cases, information architecture, user needs, and experience strategy.
- Breaking down user problems with AI
- Creating user journeys and task flows
- Mapping happy paths and edge cases
- Generating information architecture options
Learn to use AI for UX Research
Use AI to plan research, synthesize interviews, analyze surveys, identify patterns, and generate insight reports faster than ever before.
- Structuring research questions for AI analysis
- Summarising qualitative interview transcripts
- Identifying themes and affinity clusters at scale
- Generating research reports and insight decks
Learn to use AI for Design Psychology
Use AI to understand user motivation, behavior, decision-making, cognitive bias, emotion, trust, and habit formation.
- Applying cognitive biases to product design
- Designing for trust, clarity, and confidence
- Using AI to analyze behavioral triggers
- Creating habit loops and engagement systems
Learn to use AI for Product Strategy
Use AI to connect design decisions with business goals, product outcomes, positioning, user value, and strategic product direction.
- Turning business goals into design opportunities
- Prioritizing features with AI
- Defining user segments and jobs-to-be-done
- Using AI to compare product directions
Learn to use AI for Design Critique
Use AI as a sharp critique partner to evaluate screens, flows, hierarchy, usability, accessibility, and product clarity.
- Framing work for an AI critique session
- Prompting for heuristic and aesthetic feedback
- Creating feedback loops and revision cycles
- Preparing stronger stakeholder presentations
Learn to use AI for Design Systems
Use AI to document, audit, structure, and scale design systems across components, tokens, patterns, and usage rules.
- Creating component documentation
- Naming components, variants, and states
- Creating token structures
- Improving design system adoption
Learn to use AI for UX Writing
Use AI to write clearer labels, error messages, onboarding copy, empty states, tooltips, and product microcopy.
- Writing button labels and navigation copy
- Improving error and validation messages
- Creating empty-state and onboarding copy
- Testing multiple copy directions quickly
Learn to use AI for Accessible Design
Use AI to check accessibility risks, rewrite confusing content, improve contrast thinking, and design more inclusive experiences.
- Auditing interfaces for accessibility issues
- Designing for keyboard and screen reader flows
- Checking cognitive accessibility
- Writing inclusive design recommendations
Learn to use AI for Interaction Design
Use AI to improve user flows, interaction states, transitions, motion ideas, and micro-interactions.
- Designing hover, pressed, disabled, and focus states
- Improving form interactions
- Designing purposeful micro-interactions
- Mapping interaction rules for developers
Learn to use AI for Prototyping
Use AI to move from static ideas to clickable prototypes, coded prototypes, testable flows, and interactive demos.
- Turning design ideas into prototype plans
- Using AI to create HTML/CSS prototypes
- Creating clickable interaction logic
- Preparing prototypes for user testing
Learn to use AI inside Figma Workflows
Use AI to speed up naming, documentation, component planning, auto-layout thinking, and design file cleanup.
- Naming layers and components better
- Creating Figma documentation faster
- Planning auto-layout structures
- Creating annotation notes for developers
Learn to use AI for Developer Handoff
Use AI to convert design decisions into clear specs, acceptance criteria, component behavior, and developer-friendly documentation.
- Writing design specs from screens
- Creating acceptance criteria
- Documenting responsive behavior
- Writing edge cases for developers
Learn to use AI for Portfolio Writing
Use AI to structure case studies, sharpen narratives, write impact statements, and make your design work easier to understand.
- Turning projects into strong case study stories
- Writing problem, process, and impact sections
- Creating recruiter-friendly summaries
- Preparing interview talking points
Learn to use AI for Usability Testing
Use AI to plan tests, write tasks, analyze findings, and convert usability observations into design improvements.
- Creating usability test plans and task scenarios
- Generating moderator scripts
- Summarising test observations
- Creating design recommendations from results
Learn to use AI for Competitive UX Analysis
Use AI to analyze competitors, compare flows, identify UX gaps, and find product opportunities.
- Creating competitor audit frameworks
- Comparing onboarding, pricing, and key flows
- Finding gaps and differentiation opportunities
- Translating analysis into product ideas
Learn to use AI for Growth Design
Use AI to improve conversion, activation, retention, referrals, pricing flows, upgrade paths, and monetization experiences.
- Auditing landing pages and funnels
- Improving signup and onboarding conversion
- Designing nudges and upgrade prompts
- Generating A/B test ideas
Learn to use AI for Service Design
Use AI to map multi-touchpoint experiences, backstage processes, service failures, operational journeys, and customer support moments.
- Creating service blueprints
- Mapping frontstage and backstage interactions
- Finding service breakdowns and recovery moments
- Turning messy services into clear systems
Learn to use AI for Design Leadership
Use AI to improve design reviews, team rituals, hiring, strategy communication, critique culture, and stakeholder alignment.
- Preparing design review narratives
- Giving better feedback to designers
- Writing design principles
- Using AI to mentor junior designers
design.md vs Regular AI
Last updated May 18, 2026See what happens when you give AI a design.md file from a site you love — versus asking it to design from scratch.
- Generic blue #0066FF — AI default
- System font, no type scale
- Uniform card padding, no rhythm
- No brand personality
- Brand violet #635BFF from design.md
- Sohne type scale with real weights
- 4px grid, 40px section gap
- Stripe's editorial confidence
Import a reference site to get your own design.md