@gokbeyinac
A prompt to kick start a web design project. This prompt is the starting point for every design project in my workflow.
You're a senior creative director at a design studio known for bold, opinion-driven web experiences. I'm briefing you on a new project. **Client:** company_name **Industry:** industry **Existing site:** if_there_is_one_or_delete_this_line **Positioning:** [Example: "The most expensive interior design studio in Istanbul that only works with 5 clients/year"] **Target audience:** [Who are they? What are they looking for? What are the motivations?] **Tone:** [3-5 adjective: eg. "confident...
This prompt will help you to build your web site page by page after the kick starter prompt
Based on the approved concept, build the [Homepage/About/etc.] page. Constraints: - Single-file React component with Tailwind - Mobile-first, responsive - Performance budget: no library over 50kb unless justified - [Specific interaction from Phase 1] must be the hero moment - Use the frontend-design skill for design quality Show me the component. I'll review before moving to the next page.
This prompt will help you to refine and polish over the design iteration.
Review the current page against these criteria: - Does the hero section create a clear emotional reaction in <3 seconds? - Is the typography hierarchy clear at every breakpoint? - Are interactions purposeful or decorative? - Does this feel like reference_site_x in quality but distinct in identity? Suggest 3 specific improvements with reasoning, then implement them.
This prompt instructs Claude to crawl the entire codebase and extract every design-related token, pattern, and component into a raw inventory. It produces a structured JSON audit, not a design system yet, just the raw material. Run this first before any organization or documentation happens. When to use: At the very start, when you have a working codebase but no documented design system.
You are a senior design systems engineer conducting a forensic audit of an existing codebase. Your task is to extract every design decision embedded in the code — explicit or implicit. ## Project Context - **Framework:** [Next.js / React / etc.] - **Styling approach:** [Tailwind / CSS Modules / Styled Components / etc.] - **Component library:** [shadcn/ui / custom / MUI / etc.] - **Codebase location:** [path or "uploaded files"] ## Extraction Scope Analyze the entire codebase and extract the ...
Takes the raw JSON audit from Phase 1 and transforms it into a structured, named token system with a clear hierarchy (primitive → semantic → component). This is where the messy reality of the codebase gets organized into a proper design language. Claude will also flag what to rename, merge, or deprecate.
You are a design systems architect. I'm providing you with a raw design audit JSON from an existing codebase. Your job is to transform this chaos into a structured token architecture. ## Input [Paste the Phase 1 JSON output here, or reference the file] ## Token Hierarchy Design a 3-tier token system: ### Tier 1 — Primitive Tokens (raw values) Named, immutable values. No semantic meaning. - Colors: `color-gray-100`, `color-blue-500` - Spacing: `space-1` through `space-N` - Font sizes: `font-s...
Generates detailed documentation for each component in the design system. This is not just a props table — it includes usage guidelines, do/don't examples, accessibility requirements, and the specific tokens each component consumes. The output becomes the component section of the CLAUDE.md.
You are a design systems documentarian creating the component specification for a CLAUDE.md file. This documentation will be used by AI coding assistants (Claude, Cursor, Copilot) to generate consistent UI code. ## Context - **Token system:** [Paste or reference Phase 2 output] - **Component to document:** [Component name, or "all components from inventory"] - **Framework:** [Next.js + React + Tailwind / etc.] ## For Each Component, Document: ### 1. Overview - Component name (PascalCase) - On...
This is the final assembly prompt. It takes all outputs from Phases 1-3 and compiles them into a single, production-ready CLAUDE.md file. The file is structured so that AI assistants can parse it efficiently — with explicit rules, token tables, component specs, and a "Quick Reference" section for the most commonly needed information.
You are compiling the definitive CLAUDE.md design system reference file. This file will live in the project root and serve as the single source of truth for any AI assistant (or human developer) working on this codebase. ## Inputs - **Token architecture:** [Phase 2 output] - **Component documentation:** [Phase 3 output] - **Project metadata:** - Project name: name - Tech stack: [Next.js 14+ / React 18+ / Tailwind 3.x / etc.] - Node version: version - Package manager: [npm / pnpm /...
Use this prompt periodically (monthly, or after major feature additions) to keep the CLAUDE.md in sync with the actual codebase. It performs a diff between the documented design system and the current code, flagging drift.
You are a design system auditor performing a sync check. Compare the current CLAUDE.md design system documentation against the actual codebase and produce a drift report. ## Inputs - **CLAUDE.md:** paste_or_reference_file - **Current codebase:** path_or_uploaded_files ## Check For: 1. **New undocumented tokens** - Color values in code not in CLAUDE.md - Spacing values used but not defined - New font sizes or weights 2. **Deprecated tokens still in code** - Tokens documente...
Use this prompt when the codebase has changed since the last FORME.md was written. It performs a diff between the documentation and current code, then produces only the sections that need updating not the entire document from scratch.
You are updating an existing FORME.md documentation file to reflect changes in the codebase since it was last written. ## Inputs - **Current FORGME.md:** paste_or_reference_file - **Updated codebase:** upload_files_or_provide_path - **Known changes (if any):** [e.g., "We added Stripe integration and switched from REST to tRPC" — or "I don't know what changed, figure it out"] ## Your Tasks 1. **Diff Analysis:** Compare the documentation against the current code. Identify what's new, w...
A prompt system for generating plain-language project documentation. This prompt generates a [FORME].md (or any custom name) file a living document that explains your entire project in plain language. It's designed for non-technical founders, product owners, and designers who need to deeply understand the technical systems they're responsible for, without reading code. The document doesn't dumb things down. It makes complex things legible through analogy, narrative, and structure.
You are a senior technical writer who specializes in making complex systems
understandable to non-engineers. You have a gift for analogy, narrative, and
turning architecture diagrams into stories.
I need you to analyze this project and write a comprehensive documentation
file called `FORME.md` that explains everything about this project in
plain language.
## Project Context
- **Project name:** name
- **What it does (one sentence):** [e.g., "A SaaS platform that lets restaurants manage their...Generates a design handoff document that serves as direct implementation instructions for AI coding agents. Unlike traditional handoff notes that describe how a design "should feel," this document provides machine-parseable specifications with zero ambiguity. Every value is explicit, every state is defined, every edge case has a rule.
1# Design Handoff Notes — AI-First, Human-Readable23### A structured handoff document optimized for AI implementation agents (Claude Code, Cursor, Copilot) while remaining clear for human developers45---67## About This Prompt89**Description:** Generates a design handoff document that serves as direct implementation instructions for AI coding agents. Unlike traditional handoff notes that describe how a design "should feel," this document provides machine-parseable specifications with zero ambiguit...
Systematically checks a built design against its intended specification across browsers, devices, and edge cases. This is the designer's QA not functional testing, but visual fidelity and interaction quality. Produces a categorized issue list with exact reproduction steps and suggested fixes
You are a senior QA specialist with a designer's eye. Your job is to find every visual discrepancy, interaction bug, and responsive issue in this implementation. ## Inputs - **Live URL or local build:** [URL / how to run locally] - **Design reference:** [Figma link / design system / CLAUDE.md / screenshots] - **Target browsers:** [e.g., "Chrome, Safari, Firefox latest + Safari iOS + Chrome Android"] - **Target breakpoints:** [e.g., "375px, 768px, 1024px, 1280px, 1440px, 1920px"] - **Priority ar...
Runs a performance-focused analysis of the built site and produces actionable optimization recommendations. This isn't just "run Lighthouse" it interprets the results, prioritizes fixes by impact-to-effort ratio, and provides implementation-ready solutions. Written for a designer who needs to communicate performance issues to developers.
You are a web performance specialist. Analyze this site and provide
optimization recommendations that a designer can understand and a
developer can implement immediately.
## Input
- **Site URL:** url
- **Current known issues:** [optional — "slow on mobile", "images are huge"]
- **Target scores:** [optional — "LCP under 2.5s, CLS under 0.1"]
- **Hosting:** [Vercel / Netlify / custom server / don't know]
## Analysis Areas
### 1. Core Web Vitals Assessment
For each metric, explain:
- **What i...Generates a comprehensive, project-specific pre-launch checklist covering every category a designer should verify before going live. Not a generic list it's tailored to the specific project's tech stack, features, and requirements.
You are a launch readiness specialist. Generate a comprehensive
pre-launch checklist tailored to this specific project.
## Project Context
- **Project:** [name, type, description]
- **Tech stack:** [framework, hosting, services]
- **Features:** key_features_that_need_verification
- **Launch type:** [soft launch / public launch / client handoff]
- **Domain:** [is DNS already configured?]
## Generate Checklist Covering:
### Functionality
- All critical user flows work end-to-end
- All forms ...