A prompt to kick start a web design project
Kickstart Prompt for Web UX & UI Design
A prompt to kick start a web design project. This prompt is the starting point for every design project in my workflow.
Overview
A prompt to kick start a web design project. This prompt is the starting point for every design project in my workflow.
The prompt
| 1 | You're a senior creative director at a design studio known for bold, |
| 2 | opinion-driven web experiences. I'm briefing you on a new project. |
| 3 | |
| 4 | **Client:** ${company_name} |
| 5 | **Industry:** ${industry} |
| 6 | **Existing site:** ${if_there_is_one_or_delete_this_line} |
| 7 | **Positioning:** [Example: "The most expensive interior design studio in Istanbul that only works with 5 clients/year"] |
| 8 | **Target audience:** [Who are they? What are they looking for? What are the motivations?] |
| 9 | **Tone:** [3-5 adjective: eg. "confident, minimal, slow-paced, editorial"] |
| 10 | **Anti-references:** [Example: "No generic SaaS layouts, |
| 11 | no stock photography feel, no Dribbble-bait"] |
| 12 | **References:** [2-3 site URL or style direction] |
| 13 | **Key pages:** [Homepage, About, Services, Contact — or others] |
| 14 | |
| 15 | Before writing any code, propose: |
| 16 | 1. A design concept in 2-3 sentences (the "big idea") |
| 17 | 2. Layout strategy per page (scroll behavior, grid approach) |
| 18 | 3. Typography and color direction |
| 19 | 4. One signature interaction that defines the site's personality |
| 20 | 5. Tech stack decisions (animations, libraries) with reasoning |
| 21 | |
| 22 | Do NOT code yet. Present the concept for my review. |
Connects with Agent Alley MCP · agentalley.io/mcp
Details
- Updated
- Sep 9, 2026
- License
- CC0-1.0
- Source
- prompts.chat ↗
- Creator
- Nureddin Gökbey İnaç · 3 listings
Similar prompts
See all →
SkillDesign, redesign, shape, critique, audit, polish, clarifyImpeccable
pbakaus/impeccable · by pbakausUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.★ 70.4k GitHub stars
SkillApple's approach to interface design and fluidApple design
emilkowalski/skills · by emilkowalskiApple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.★ 40.8k GitHub stars
SkillBuild an animation from scratchBuilding Animationsemilkowalski/skills · by emilkowalskiBuild an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.★ 40.8k GitHub stars
SkillRenders a component you choose in every stateBreak
jakubkrehel/skills · by jakubkrehelRenders a component you choose in every state and scenario on a temporary page and stress tests it.★ 7.1k GitHub stars
SkillReviews your work across multiple categories like UIChange reviewjakubkrehel/skills · by jakubkrehelReviews your work across multiple categories like UI, typography, layout, color, writing and accessibility and gives you a detailed analysis of the findings.★ 7.1k GitHub stars
SkillCraft-first interface design for dashboards, admin panelsThe Problem
Dammyjay93/interface-design · by Dammyjay93Craft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when designing, building, reviewing, auditing, or refining product UI where visual craft, layout hierarchy, tokens, states, visual direction, or design-system consistency matter. Not for marketing pages, landing pages, campaigns, or brand-only work.★ 5.8k GitHub starsMore from Nureddin Gökbey İnaç
PromptA prompt system for generating plain-language project"Explain It Like I Built It" Technical Documentation for Non-Technical Founders
f/prompts.chat · by Nureddin Gökbey İnaç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.New listing
PromptThis prompt instructs Claude to crawl the entire codebaseDesign system extraction prompt kitf/prompts.chat · by Nureddin Gökbey İnaç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.New listing