{
 "schema": "aiblocks-page/1",
 "id": "website-design-dna-extractor",
 "type": "skill",
 "name": "Website design analyst",
 "summary": "Paste a public website link and get its colours, fonts, spacing and layout rules in a design guide. Use it to analyze a website's design.",
 "headline": "Website design analyst",
 "subhead": "Give your AI a public website link and a connected browser. Get a written guide and a JSON file with its colours, fonts, spacing and layout rules.",
 "job": {
  "id": "design-work",
  "name": "Design things people love"
 },
 "level": "intermediate",
 "thinking": "high",
 "tested": true,
 "updated": "2026-11-03",
 "first_published": "2026-10-26",
 "inputs": [
  {
   "type": "web_page",
   "required": true,
   "label": "Web page",
   "what": "a built or live web page, as a URL or saved HTML"
  },
  {
   "type": "tool_connection",
   "required": true,
   "label": "Tool connection",
   "what": "an AI connected to an outside tool or service, such as an MCP server"
  }
 ],
 "outputs": [
  {
   "type": "design_direction",
   "required": true,
   "label": "Design direction",
   "what": "a page's visual direction: type, colour, layout rules and what to avoid"
  },
  {
   "type": "document",
   "required": true,
   "label": "Document",
   "what": "a finished document, such as a Word file, a PDF or a page of notes"
  },
  {
   "type": "design_tokens",
   "required": true,
   "label": "Design tokens",
   "what": "a design system's tokens: colours, type sizes, spacing and breakpoints, as CSS or JSON that code can use"
  }
 ],
 "you_give": [
  "A public website URL that opens without signing in.",
  "An AI with Playwright MCP already connected and permission to use an isolated browser.",
  "Whether to read the supplied page alone or also up to two linked public pages.",
  "Where to save the guide and whether you want a draft for a coding tool."
 ],
 "you_get": [
  "A Markdown guide with measured design values and evidence for the design rules.",
  "A JSON file with the same values and rules.",
  "Screenshots and notes about missing or approximate measurements.",
  "A coding-tool rules draft when requested."
 ],
 "use_when": [
  "You want to understand the design of a website you admire.",
  "You need measured colours, type sizes, spacing and layout rules for a design brief.",
  "You want to separate a site's repeated rules from choices used on one page."
 ],
 "skip_when": [
  "You want the text or data from a page: copy it by hand or use a scraping tool, since this skill only studies the look.",
  "The site needs a login: save screenshots yourself and ask your AI to describe them, because this skill reads public pages only.",
  "You want a finished website built for you: hire a web designer or use a site builder, since this skill only writes a guide."
 ],
 "output_sample": {
  "input": [
   "A public website link that opens without signing in",
   "Whether to read one page or also up to two linked public pages (optional)",
   "Whether you want rules for a coding tool (optional)"
  ],
  "prerequisites": [
   "An AI that can run Playwright MCP, a browser tool, in an isolated browser",
   "A folder where your AI can save files",
   "An AI that can run code, to run the commands in this skill"
  ],
  "output": [
   {
    "name": "{domain}.md",
    "contains": "The human-readable guide with the Design Map and the Taste DNA sections."
   },
   {
    "name": "Design Map",
    "contains": "Measured colours, type scale, spacing, corner radii, shadows and grid taken from the page."
   },
   {
    "name": "Taste DNA",
    "contains": "Three or four design choices, each with the trigger, the decision, the reason and the evidence."
   },
   {
    "name": "{domain}.json",
    "contains": "The same values and rules in a structured file that other tools can read."
   },
   {
    "name": "Coding-tool export",
    "contains": "A draft of design rules for your build tool, written only when you ask for it."
   },
   {
    "name": "Report",
    "contains": "A short note on the files saved and the strongest design principle found."
   }
  ]
 },
 "output_shape": "A website-named Markdown file and JSON file containing measured design values and supported design choices, with capture limitations stated.",
 "how_to_use": [
  "Set up Playwright MCP first. In Claude Code run: claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated. The first run downloads a browser of about 100 MB. Restart your AI tool before you start.",
  "Download the complete skill folder and give it to your AI. Keep its references beside SKILL.md.",
  "Read AI-BLOCKS-USAGE.md, then ask your AI to follow SKILL.md for the public URL you supply.",
  "Choose the page scope and output location. The basic output is the Markdown guide and JSON file.",
  "Review the measured evidence and any proposed coding-tool configuration changes before applying them. A coding-tool export can add to or change your existing instruction files, so confirm before it writes.",
  "Read the reasons as inferred, not as what the company said. Only the measured values are facts.",
  "Next, give the JSON file to the Design token builder. It turns the measured colours, fonts and spacing into tokens your own site can use."
 ],
 "checks": [
  "Each measurement comes from the captured page or is marked as approximate.",
  "Each design choice cites visible evidence and names a reasonable alternative.",
  "The JSON parses and agrees with the written guide.",
  "Login screens, blocked access and incomplete captures are reported honestly.",
  "Existing project instructions change only within the user's authorization."
 ],
 "next": [
  {
   "name": "Design token and handoff builder",
   "url": "https://useaiblocks.com/skills/design-token-builder",
   "why": "Design it"
  }
 ],
 "source": {
  "by": "Sen Lin",
  "repo": "senlindesign/taste-skill",
  "url": "https://github.com/senlindesign/taste-skill/tree/6dce223f2f5665d3636ca9a44ec3a7aa1322a9b8",
  "licence": "MIT",
  "original_name": "taste",
  "commit": "6dce223f2f5665d3636ca9a44ec3a7aa1322a9b8"
 },
 "credits": [
  {
   "title": "Taste skill",
   "by": "Sen Lin",
   "url": "https://github.com/senlindesign/taste-skill/tree/6dce223f2f5665d3636ca9a44ec3a7aa1322a9b8",
   "used": "Original instructions and six reference files copied without changes. AI Blocks added display metadata, provenance and usage notes."
  }
 ],
 "files": [
  "AI-BLOCKS-USAGE.md",
  "LICENSE",
  "README.md",
  "references/export-formats.md",
  "references/extract.js",
  "references/step1-measure.md",
  "references/step2-pattern.md",
  "references/step3-taste.md",
  "references/step4-observer.md",
  "source.json"
 ],
 "links": {
  "page": "https://useaiblocks.com/skills/website-design-dna-extractor",
  "markdown": "https://useaiblocks.com/skills/website-design-dna-extractor.md",
  "json": "https://useaiblocks.com/skills/website-design-dna-extractor.json",
  "instructions": "https://useaiblocks.com/skills/website-design-dna-extractor/SKILL.md",
  "download": "https://useaiblocks.com/skills/website-design-dna-extractor.zip",
  "api_item": "https://useaiblocks.com/api/v1/items/website-design-dna-extractor",
  "api_document": "https://useaiblocks.com/api/v1/documents/skill/website-design-dna-extractor",
  "mcp": "https://useaiblocks.com/mcp"
 }
}