{
  "slug": "first-vibe-coded-app",
  "name": "First Vibe-Coded App",
  "tagline": "Defaults that are hard to get wrong, for people who have never built software before.",
  "version": "07e55d2",
  "url": "https://dontmakeitugly.com/packs/first-vibe-coded-app",
  "markdownUrl": "https://dontmakeitugly.com/packs/first-vibe-coded-app.md",
  "designMdUrl": "https://dontmakeitugly.com/packs/first-vibe-coded-app/DESIGN.md",
  "files": [
    {
      "path": "DESIGN.md",
      "content": "---\nversion: alpha\nname: First Vibe-Coded App\ndescription: Safe, good-looking defaults for someone building their first app with an agent. Nothing here needs a design vocabulary.\ncolors:\n  paper: \"#f8f7f4\"\n  surface: \"#ffffff\"\n  surface-2: \"#efede8\"\n  ink: \"#17181a\"\n  ink-2: \"#55575c\"\n  ink-3: \"#7d8087\"\n  line: \"#e3e1dc\"\n  line-strong: \"#c9c6bf\"\n  primary: \"#0f766e\"\n  primary-soft: \"#e6f4f2\"\n  on-primary: \"#ffffff\"\n  success: \"#15803d\"\n  success-soft: \"#ecfdf3\"\n  error: \"#b42318\"\n  error-soft: \"#fef3f2\"\ntypography:\n  title:\n    fontFamily: DM Sans\n    fontSize: 32px\n    fontWeight: 600\n    lineHeight: 1.15\n    letterSpacing: -0.02em\n  heading:\n    fontFamily: DM Sans\n    fontSize: 20px\n    fontWeight: 600\n    lineHeight: 1.3\n  body:\n    fontFamily: DM Sans\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.6\n  small:\n    fontFamily: DM Sans\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n  label:\n    fontFamily: DM Sans\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.4\n  mono:\n    fontFamily: DM Mono\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\nrounded:\n  sm: 6px\n  md: 8px\n  lg: 12px\n  full: 9999px\nspacing:\n  base: 4px\n  xs: 4px\n  sm: 8px\n  md: 16px\n  lg: 24px\n  xl: 32px\n  2xl: 48px\n  3xl: 64px\n  gutter: 16px\n  measure: 640px\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.md}\"\n    height: 40px\n  button-secondary:\n    backgroundColor: \"{colors.surface}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.md}\"\n    height: 40px\n  card:\n    backgroundColor: \"{colors.surface}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.lg}\"\n    padding: \"{spacing.lg}\"\n  input:\n    backgroundColor: \"{colors.surface}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.sm}\"\n    height: 40px\n  badge:\n    backgroundColor: \"{colors.primary-soft}\"\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.small}\"\n    rounded: \"{rounded.full}\"\n    padding: \"{spacing.xs}\"\n  list-item:\n    backgroundColor: \"{colors.surface}\"\n    textColor: \"{colors.ink}\"\n    padding: \"{spacing.md}\"\n    rounded: \"{rounded.md}\"\n---\n\n# First Vibe-Coded App\n\n## Overview\n\nYou are building something for the first time and you do not want it to look like a demo. This contract gives you a look that is hard to get wrong: warm off-white pages, dark grey text, one teal for buttons and links, soft corners, a friendly typeface. It is deliberately plain. Plain and consistent beats interesting and messy every time.\n\nEverything in this file is a default. Change a value only when you have a reason you can say out loud.\n\n## Colors\n\nFive greys, one colour, two statuses. Learn what each is for and you will never need to pick a colour again.\n\n- **Paper (#f8f7f4):** the page background. Not pure white, so white cards stand out a little.\n- **Surface (#ffffff):** cards, forms, dialogs. Surface 2 (#efede8) is for things that sit back, like a sidebar or a disabled state.\n- **Ink (#17181a):** headings and body text. Ink 2 for less important text. Ink 3 for hints and placeholders. Never lighter than ink 3 for anything someone has to read.\n- **Line (#e3e1dc):** borders. All of them.\n- **Primary (#0f766e):** teal. The main button, links, the active tab, the focus ring. One teal thing per screen is ideal; two is fine; a screen that is mostly teal is wrong.\n- **Success and Error:** messages after the user does something. Not for decoration.\n\n## Typography\n\nOne typeface, DM Sans, in five sizes. A second one, DM Mono, only for code or IDs.\n\n- Page title 32px semibold. Section heading 20px semibold. Body 16px. Small text 14px. Buttons and form labels 14px medium.\n- Line height is generous (1.6 on body). Text blocks stop at 640px wide.\n- Do not add a third size between these. If something feels like it needs one, change its colour to ink 2 instead.\n\n## Layout\n\nEverything sits on a 4px grid: 8 between related things, 16 inside cards and between form fields, 24 between groups, 48 between sections. Page padding is 16px on mobile and 24px on desktop. The content column is at most 1040px wide and centred.\n\nPut things in a single column until you have a reason for two. Mobile first: if it works at 390px wide, it will work everywhere.\n\n## Elevation & Depth\n\nFlat with one exception. Cards are white on paper with a line border and no shadow. Dialogs and dropdowns get one soft shadow because they float above the page. No gradients, no glow, no glass.\n\n## Shapes\n\nSoftly rounded: 6px on badges and small controls, 8px on buttons and inputs, 12px on cards. Pills only for badges and avatars. Keep the same radius on every button.\n\n## Components\n\n- **Buttons:** 40px tall. Primary is teal with white text. Secondary is white with a line border. One primary button per screen.\n- **Inputs:** 40px tall, white, line border, teal ring on focus. Label above in label style, help or error text below in small.\n- **Cards:** white, line border, 12px radius, 24px padding, a heading and some body text. Not a card inside a card.\n- **Lists:** rows with 16px padding and a hairline between them. Use Auto Animate so adding and removing rows feels smooth.\n- **Badges:** pill, teal-soft background, teal text, small size.\n- **Empty state:** one sentence saying what will appear here and one button to make it appear.\n- **Navigation:** a top bar with the app name on the left and at most four links. Active link in teal.\n\n## Do's and Don'ts\n\n- Do use only DM Sans and DM Mono. If a font you did not choose shows up, remove it.\n- Do use only the colours in this file. When you want a new one, use ink 2 or surface 2 instead.\n- Do keep text readable: 4.5:1 contrast, 16px body, never grey-on-grey.\n- Do respect `prefers-reduced-motion`: animations turn off when the user asks.\n- Don't use gradients, purple, glow effects or glass. These are the tells of a generated app.\n- Don't centre everything. Left-align text and let the layout breathe.\n- Don't add icons to every button and heading. Icons go where they carry meaning.\n- Don't ask the agent to \"make it pop\". Ask it to check this file.\n",
      "overwrite": "never"
    },
    {
      "path": "dmiu.config.json",
      "content": "{\n  \"pack\": \"first-vibe-coded-app\",\n  \"designMd\": \"DESIGN.md\",\n  \"baseUrl\": \"http://localhost:3000\",\n  \"routes\": [\n    \"/\"\n  ],\n  \"viewports\": [\n    {\n      \"width\": 1280,\n      \"height\": 800\n    },\n    {\n      \"width\": 390,\n      \"height\": 844\n    }\n  ],\n  \"tolerance\": {\n    \"color\": 8,\n    \"spacing\": 2\n  },\n  \"forbidGradients\": true,\n  \"ignore\": [],\n  \"baselines\": {\n    \"dir\": \".dmiu/baselines\",\n    \"threshold\": 0.02\n  }\n}\n",
      "overwrite": "never"
    },
    {
      "path": ".dmiu/references/README.md",
      "content": "# Reference screens for First Vibe-Coded App\n\nThese are third-party sites we point at, not assets to copy. Take the principle, not the pixels.\n\n## Godly\n\nhttps://godly.website\n\nWhat good looks like. You don't need to copy any of it; you need to have seen it before you describe what you want.\n\nLook at: how much empty space there is, how few colours each site uses\n\nPreview: https://dontmakeitugly.com/previews/godly.jpg\n\n## tweakcn\n\nhttps://tweakcn.com\n\nA theme editor for shadcn apps. Ten minutes here does more than an afternoon of prompting.\n\nLook at: how one radius and one accent change the whole feel\n\nPreview: https://dontmakeitugly.com/previews/tweakcn.jpg\n\n## Checklist Design\n\nhttps://www.checklist.design\n\nWhat every screen should include. Paste a checklist into your prompt so the agent stops forgetting things.\n\nLook at: the form and empty-state checklists\n\nPreview: https://dontmakeitugly.com/previews/checklist-design.jpg\n",
      "overwrite": "always"
    }
  ],
  "agentsSnippet": "<!-- BEGIN:dontmakeitugly -->\n## Design contract (First Vibe-Coded App)\n\nThis project uses a DESIGN.md contract from Don't Make It Ugly. Before writing or changing any UI:\n\n1. Read `DESIGN.md`. Use only its fonts, colours, spacing scale and radii. If something you need isn't there, ask before inventing it.\n2. Read `.dmiu/references/README.md` for the reference screens and what to take from each.\n3. When you finish a UI change, start the dev server and run `npx dontmakeitugly check`. Read `.dmiu/report.md` and fix every error before you say you're done.\n4. Never edit `DESIGN.md` to make a check pass. Change the code.\n\nCurated resources for this pack (each page says how an agent can use it):\n\n- Godly: https://dontmakeitugly.com/resources/godly.md\n- tweakcn: https://dontmakeitugly.com/resources/tweakcn.md\n- Checklist Design: https://dontmakeitugly.com/resources/checklist-design.md\n- AutoAnimate: https://dontmakeitugly.com/resources/autoanimate.md\n- v0: https://dontmakeitugly.com/resources/v0.md\n- Radix Colors: https://dontmakeitugly.com/resources/radix-colors.md\n- Web Interface Guidelines: https://dontmakeitugly.com/resources/vercel-web-interface-guidelines.md\n- Playwright MCP: https://dontmakeitugly.com/resources/playwright-mcp.md\n<!-- END:dontmakeitugly -->",
  "references": [
    {
      "resource": "godly",
      "name": "Godly",
      "caption": "What good looks like. You don't need to copy any of it; you need to have seen it before you describe what you want.",
      "focus": "how much empty space there is, how few colours each site uses",
      "url": "https://godly.website",
      "image": "https://dontmakeitugly.com/previews/godly.jpg"
    },
    {
      "resource": "tweakcn",
      "name": "tweakcn",
      "caption": "A theme editor for shadcn apps. Ten minutes here does more than an afternoon of prompting.",
      "focus": "how one radius and one accent change the whole feel",
      "url": "https://tweakcn.com",
      "image": "https://dontmakeitugly.com/previews/tweakcn.jpg"
    },
    {
      "resource": "checklist-design",
      "name": "Checklist Design",
      "caption": "What every screen should include. Paste a checklist into your prompt so the agent stops forgetting things.",
      "focus": "the form and empty-state checklists",
      "url": "https://www.checklist.design",
      "image": "https://dontmakeitugly.com/previews/checklist-design.jpg"
    }
  ],
  "resources": [
    {
      "slug": "godly",
      "name": "Godly",
      "tagline": "Astronomically good web design inspiration, hand-picked.",
      "url": "https://godly.website",
      "markdownUrl": "https://dontmakeitugly.com/resources/godly.md",
      "agentPrompt": "Use Godly as a visual and design reference for this project.\n\nWhat it is: Astronomically good web design inspiration, hand-picked.\n\nWebsite: https://godly.website\n\nUse it specifically for:\n- landing-page inspiration\n- startup sites\n- visual direction\n\nHow you can access it: Public website.\n\nStudy the visual direction: typography, spacing, colour, hierarchy and motion. Describe what makes the references work, then apply those principles to this project's existing visual language. Do not copy layouts or assets directly; build something consistent with our own brand and accessibility requirements."
    },
    {
      "slug": "tweakcn",
      "name": "tweakcn",
      "tagline": "A visual theme editor that makes a shadcn/ui app stop looking like every other shadcn/ui app.",
      "url": "https://tweakcn.com",
      "markdownUrl": "https://dontmakeitugly.com/resources/tweakcn.md",
      "agentPrompt": "Use tweakcn as a design and implementation reference for this project.\n\nWhat it is: A visual theme editor that makes a shadcn/ui app stop looking like every other shadcn/ui app.\n\nWebsite: https://tweakcn.com\nGitHub: https://github.com/jnsahaj/tweakcn\n\nUse it specifically for:\n- restyling shadcn/ui\n- colour themes\n- making an app feel less generic\n\nHow you can access it: Public website, GitHub, Copy/paste, CLI.\nWorks with: React, Tailwind CSS.\nLicense: Apache-2.0. Respect it.\n\nRead the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource."
    },
    {
      "slug": "checklist-design",
      "name": "Checklist Design",
      "tagline": "Checklists of what every common screen and component should include.",
      "url": "https://www.checklist.design",
      "markdownUrl": "https://dontmakeitugly.com/resources/checklist-design.md",
      "agentPrompt": "Use Checklist Design as a design and implementation reference for this project.\n\nWhat it is: Checklists of what every common screen and component should include.\n\nWebsite: https://www.checklist.design\n\nUse it specifically for:\n- making sure a screen is complete\n- prompting for all states\n- QA before shipping\n\nHow you can access it: Public website, Copy/paste.\nWorks with: Framework agnostic.\n\nStudy the relevant design and implementation patterns, but adapt them to this project's existing architecture, visual language, accessibility requirements and conventions. Do not blindly copy the entire resource."
    },
    {
      "slug": "autoanimate",
      "name": "AutoAnimate",
      "tagline": "One line of code that animates list changes for you.",
      "url": "https://auto-animate.formkit.com",
      "markdownUrl": "https://dontmakeitugly.com/resources/autoanimate.md",
      "installCommand": "npm install @formkit/auto-animate",
      "agentPrompt": "Use AutoAnimate as a design and implementation reference for this project.\n\nWhat it is: One line of code that animates list changes for you.\n\nWebsite: https://auto-animate.formkit.com\nGitHub: https://github.com/formkit/auto-animate\nnpm: https://www.npmjs.com/package/@formkit/auto-animate\nInstall: npm install @formkit/auto-animate\n\nUse it specifically for:\n- animating lists\n- filter results\n- beginners\n- quick wins\n\nHow you can access it: Docs, GitHub, npm.\nWorks with: React, Vue, Svelte, Vanilla JS/CSS, Framework agnostic.\nLicense: MIT. Respect it.\n\nRead the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource."
    },
    {
      "slug": "v0",
      "name": "v0",
      "tagline": "Vercel's generative UI tool: describe a screen, get a shadcn/ui implementation.",
      "url": "https://v0.app",
      "markdownUrl": "https://dontmakeitugly.com/resources/v0.md",
      "agentPrompt": "Use v0 as a design and implementation reference for this project.\n\nWhat it is: Vercel's generative UI tool: describe a screen, get a shadcn/ui implementation.\n\nWebsite: https://v0.app\nDocumentation: https://v0.app/docs\n\nUse it specifically for:\n- first drafts of screens\n- shadcn/ui projects\n- beginners\n- prototyping\n\nHow you can access it: Public website, Docs, API, CLI.\nWorks with: React, Next.js, Tailwind CSS.\n\nRead the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource."
    },
    {
      "slug": "radix-colors",
      "name": "Radix Colors",
      "tagline": "Colour scales designed for real UI, with light and dark modes that actually match.",
      "url": "https://www.radix-ui.com/colors",
      "markdownUrl": "https://dontmakeitugly.com/resources/radix-colors.md",
      "installCommand": "npm install @radix-ui/colors",
      "agentPrompt": "Use Radix Colors as a design and implementation reference for this project.\n\nWhat it is: Colour scales designed for real UI, with light and dark modes that actually match.\n\nWebsite: https://www.radix-ui.com/colors\nDocumentation: https://www.radix-ui.com/colors/docs/overview/installation\nGitHub: https://github.com/radix-ui/colors\nnpm: https://www.npmjs.com/package/@radix-ui/colors\nInstall: npm install @radix-ui/colors\n\nUse it specifically for:\n- colour systems\n- dark mode\n- accessible palettes\n- design tokens\n\nHow you can access it: Docs, GitHub, npm.\nWorks with: Framework agnostic, Tailwind CSS.\nLicense: MIT. Respect it.\n\nRead the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource."
    },
    {
      "slug": "vercel-web-interface-guidelines",
      "name": "Web Interface Guidelines",
      "tagline": "A concise, agent-readable checklist of what a well-built web interface must get right.",
      "url": "https://github.com/vercel-labs/web-interface-guidelines",
      "markdownUrl": "https://dontmakeitugly.com/resources/vercel-web-interface-guidelines.md",
      "agentPrompt": "Use Web Interface Guidelines as a design and implementation reference for this project.\n\nWhat it is: A concise, agent-readable checklist of what a well-built web interface must get right.\n\nWebsite: https://github.com/vercel-labs/web-interface-guidelines\nGitHub: https://github.com/vercel-labs/web-interface-guidelines\n\nUse it specifically for:\n- agent rules files\n- design reviews\n- accessibility basics\n- polish\n\nHow you can access it: GitHub, Copy/paste, CLI.\nWorks with: Framework agnostic.\nLicense: MIT. Respect it.\n\nRead the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource."
    },
    {
      "slug": "playwright-mcp",
      "name": "Playwright MCP",
      "tagline": "Give your agent a browser so it can see and test what it built.",
      "url": "https://github.com/microsoft/playwright-mcp",
      "markdownUrl": "https://dontmakeitugly.com/resources/playwright-mcp.md",
      "installCommand": "claude mcp add playwright -- npx @playwright/mcp@latest",
      "agentPrompt": "Set up and use Playwright MCP in this project.\n\nWhat it is: Give your agent a browser so it can see and test what it built.\n\nWebsite: https://github.com/microsoft/playwright-mcp\nGitHub: https://github.com/microsoft/playwright-mcp\nInstall: claude mcp add playwright -- npx @playwright/mcp@latest\n\nUse it specifically for:\n- visual QA by the agent\n- responsive checks\n- accessibility tree inspection\n- iterating on design\n\nHow you can access it: MCP, GitHub, npm, Docs.\nWorks with: Framework agnostic.\nLicense: Apache-2.0. Respect it.\n\nFollow the official setup instructions above. Once available, use it when it is relevant to the task rather than by default, and tell me what it changed."
    }
  ],
  "check": {
    "routes": [
      "/"
    ],
    "colorTolerance": 8,
    "spacingTolerance": 2,
    "forbidGradients": true
  }
}