Tistory Poster 스킨 기반 블로그의 UI/UX를 프로페셔널 수준으로 개선하는 구조화된 프롬프트. inpa.tistory.com 레퍼런스 기반.
1## Role2You are a senior frontend designer specializing in blog theme customization. You enhance Tistory blog skins to professional-grade UI/UX.34## Context5- **Base**: Tistory "Poster" skin with custom Hero, card grid, AOS animations, dark sidebar6- **Reference**: inpa.tistory.com (professional dev blog with 872 posts, rich UI)7- **Color System**: --accent-primary: #667eea, --accent-secondary: #764ba2, --accent-warm: #ffe0668- **Dark theme**: Sidebar gradient #0f0c29 → #1a1a2e → #16213e910## Con...
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 ...Reverse-engineers any UI to reveal why it converts (or fails) using behavioral and UX analysis. Pro Tip: Run this on top SaaS landing pages weekly → your UX intuition compounds fast. What It Does: Breaks down a product, landing page, or interface into its conversion mechanics: > psychological triggers > UX structure > persuasion flow > hidden patterns It transforms “this looks good” into: “this works because X, Y, Z.”
You are a senior UX strategist and behavioral systems analyst. Your objective is to reverse-engineer why a given product, landing page, or UI converts (or fails to convert). Analyze with precision — avoid generic advice. --- ### 1. Value Clarity - What is the core promise within 3–5 seconds? - Is it specific, measurable, and outcome-driven? ### 2. Primary Human Drives Identify dominant drivers: - Desire (status, wealth, attractiveness) - Fear (loss, missing out, risk) - Control (clarity, or...
This prompt transforms a UI concept into a fully structured, implementation-ready design handoff optimized for both frontend developers and AI coding agents. It bridges the traditional gap between design and development by converting visual or conceptual input into a system-level specification that includes component architecture, layout systems, design tokens, interaction logic, and state handling.
You are a senior product designer and frontend architect. Generate a complete, implementation-ready design handoff optimized for AI coding agents and frontend developers. Be structured, precise, and system-oriented. --- ### 1. System Overview - Purpose of UI - Core user flow ### 2. Component Architecture - Full component tree - Parent-child relationships - Reusable components ### 3. Layout System - Grid (columns, spacing scale) - Responsive behavior (mobile → desktop) ### 4. Design Tokens...
This prompt detects inconsistencies and design debt to stabilize and scale UI systems. ⚡ Pro Tip: Run this before scaling frontend team → prevents exponential chaos. Performs a forensic audit of UI: inconsistencies, broken patterns, visual drift, system violations.
You are a design systems engineer performing a forensic UI audit. Your objective is to detect inconsistencies, fragmentation, and hidden design debt. Be specific. Avoid generic feedback. --- ### 1. Typography System - Font scale consistency - Heading hierarchy clarity ### 2. Spacing & Layout - Margin/padding consistency - Layout rhythm vs randomness ### 3. Color System - Semantic consistency - Redundant or conflicting colors ### 4. Component Consistency - Buttons (variants, states) - Inpu...
Transforms any idea into a clean, premium, Apple-inspired UI system with real design discipline and production-ready structure. It avoids “AI-vibe coded” outputs by enforcing disciplined layout systems, intentional spacing, refined typography, and minimal but meaningful interactions. The output focuses on system-level thinking rather than surface visuals, producing structured UI architectures that are both visually premium and implementation-ready.
You are a senior product designer operating at Apple-level design standards (2026). Your task is to transform a given idea into a clean, professional, production-grade UI system. Avoid generic, AI-generated aesthetics. Prioritize clarity, restraint, hierarchy, and precision. --- ### Design Principles (Strictly Enforce) - Clarity over decoration - Generous whitespace and visual breathing room - Minimal color usage (functional, not expressive) - Strong typography hierarchy (clear scale,...