Bible Network Crypto DeFi Onchain RWA AI Agent Stablecoin Chain SAFU CryptoTax DeFAI AGI Claude Me Claude Skill Claude Design Claude Cowork
Independent Media
Not affiliated with any project
Turn Ideas Into Interactive Visuals with Claude Design
claudedesign-me.com
LATEST
Where AI-Generated UI Breaks Accessibility: It's Not Just Color — Semantic Structure Is the Real Problem  ·  Case Study: Redesigning a Cluttered Dashboard — Where It Went Wrong and How AI Helped Untangle It  ·  Figma vs. Canva vs. Claude Design: Breaking Down Where Each One Actually Fits  ·  The Checklist to Run Before You Hit Generate: Five Questions, Good vs. Bad Examples  ·  Output Example: A One-Page Portfolio Site, From Prompt to Finished Result  ·  Five Prompt Templates for Common Design Tasks — Copy, Swap a Few Words, and Go
prompt-examples

Five Prompt Templates for Common Design Tasks — Copy, Swap a Few Words, and Go

30-Second Version · For the impatient
Role, task, style, format, constraints — with all five in place, the AI has no room left to guess wrong. That's the only logic behind every prompt template here.

Full Explanation +
01 · Why did this happen?

Of the five elements — role, task, style, format, constraints — which is most often left out, and most impactful when it is?

Constraints are usually the one most often left out, yet they're the key factor in whether the output is directly usable. Without constraints, the AI decides length, formality, and scope on its own — decisions that often don't match what you actually need, which means the first version usually needs heavy editing before it's usable. Adding a specific word count, or explicitly excluding certain words or approaches (like "avoid vague terms such as 'empower'"), directly eliminates an entire category of common failure modes, and the output gets much closer to usable right away.

Role and task tend to get written into a prompt naturally (skipping the task means not saying what you want done at all), but constraints feel like an "extra ask" and get skipped easily — which is exactly why they're worth calling out specifically.

02 · What is the mechanism?

Template 3 (sketch to prototype) mentions generating follow-up screens for any button that leads somewhere — why call that out specifically?

Because without being asked, the AI defaults to only handling the single screen you uploaded — it doesn't proactively guess what a button should lead to after being pressed. This is actually the same underlying problem as design handoff, in a different form: "engineers build for real data while designers often design only for the ideal screen." If a prototype stops at one static screen, either an engineer ends up guessing on their own, or you discover much later that a whole set of follow-up states is missing — and going back to fill them in afterward usually takes more time than getting them upfront.

Explicitly asking for follow-up screens to be generated in the prompt handles this easy-to-overlook step early, instead of discovering the prototype is only half-built at the handoff or review stage.

03 · How does it affect me?

These templates repeat phrasing like "don't invent a new style on your own" — what prompt engineering technique does this fall under?

This is a negative constraint — explicitly telling the AI what not to do, rather than only describing what to do. Negative constraints are especially useful for targeting a failure mode you've already actually run into in previous output, because positive descriptions often can't fully cover every possible way things could go wrong — but if you already know a specific mistake the AI tends to make (like defaulting to its own color palette), naming it directly and excluding it is more efficient than trying to cover every possibility with positive phrasing.

Template 5 specifically emphasizes a negative constraint in the brand consistency check (don't invent a new visual language) because that's exactly the most common failure mode — without an explicit limit, the AI tends to fill gaps with whatever it finds aesthetically pleasing rather than prioritizing the existing reference material. That tendency doesn't automatically disappear just because you've supplied a reference document; it needs to be explicitly ruled out with a negative constraint.

04 · What should I do?

If you could only carry one core principle from these five templates into a new task that has no template to reach for, which one should it be?

If only one principle survives, it should be: constraints exist to rule out a known failure mode, not as an arbitrary rule tacked on for its own sake. When facing a new task none of the templates cover, rather than wondering whether to force-fit some template's sentence structure, ask yourself: what has gone wrong with tasks like this before, and what does the AI tend to fill in on its own that you don't actually want? Turning those answers into specific constraints in the prompt is applying the logic behind the templates to a new situation, rather than being locked into the templates' surface wording.

The templates themselves will go stale and need rewording as tools change, but the habit of thinking through known failure modes first and turning them into explicit constraints is a more durable skill than any single template.

Full Content +

Instead of thinking up a prompt from scratch every time, it's worth keeping a set of templates on hand that you can apply and tweak a few key details on. This article collects five prompt templates for common design tasks, and each one follows the same underlying logic: role, task, style, format, and constraints — with all five elements in place, the AI has much less room to guess wrong.

Template 1: Landing Page Hero Section

"You are a designer building conversion-focused pages for [industry]. Create a landing page hero section for [product name and one-sentence description], targeting [specific audience description]. The headline should call out [core pain point or benefit], the subheadline should add [key differentiator], and the primary button copy should be action-oriented (like 'Start Free Trial' rather than 'Learn More'). Style: [clean and minimal / bold and colorful / professional and understated — pick one]. Constraints: headline under 12 words, avoid vague terms like 'unlock' or 'empower.'"

Template 2: Feature Card Grid

"Create a features section with [number] cards, covering [list each feature's name and a one-sentence description]. Card format: one icon, a title under 6 words, and description text under 20 words. Layout: [three-column / two-column / stacked single-column — pick one]. Keep the style consistent with the hero section — don't invent a new color scheme."

Template 3: Sketch to Prototype

"This is a hand-drawn sketch of a [product type], showing [this screen's role within the product — e.g., home screen / settings screen / checkout screen]. In the sketch, [describe each key element one by one — e.g., 'the circle at the top is a progress indicator']. Generate a [high-fidelity / mid-fidelity, pick based on the current need] prototype based on this sketch, in a [specific adjectives — e.g., modern, warm, professional] style, using [color palette]. If any button leads to a follow-up screen, generate that too — don't stop at just this one page."

Template 4: Slide Deck Outline

"Based on the [document type — e.g., product spec, old deck, meeting notes] I've uploaded, generate a [number] slide outline for [presentation purpose — e.g., persuading investors, internal progress update, client pitch]. Narrative order: lead with [opening angle — e.g., pain point, current state], then cover [core content — e.g., solution, results]. Outline level only (headline plus three bullets per slide) — don't write full script yet, I'll adjust the order myself."

Template 5: Brand Consistency Check

"This is a recent document from our company that's generally regarded as good quality (attached). Read the color, typography, and tone-of-voice conventions from this document, and everything I ask you to generate from here on should stay as close to this existing style as possible — don't invent a new visual language on your own. If anything I ask for conflicts with this reference document's style, check with me first rather than deciding on your own."

What This Means for Your Design Work

The common skeleton across all five templates is spelling out role, task, style, format, and constraints so there's no ambiguity for the AI to guess at. In practice, the more efficient use isn't copying these templates verbatim — it's treating them as a checklist. After writing your own prompt, check it against the five elements to see if anything's missing; whatever's missing is usually exactly what you'll end up spending time fixing later.

Diagram
Five-Element Prompt Skeleton五要素提示詞骨架圖:角色、任務、風格、格式、限制條件,限制條件最容易被省略Five-Element Prompt SkeletonRoleTaskStyleFormatConstraintsmost skippedMissing any element = AI fills the gap on its ownUse as a checklistnot a script to copy verbatimClaude Design Me · claudedesign-me.com
Feel free to share. Please credit the source.
Ask a Question
Please enter at least 10 characters
Related Articles
The Checklist to Run Before You Hit Generate: Five Questions, Good vs. Bad Examples
prompt-examples · Aug 14
Where AI-Generated UI Breaks Accessibility: It's Not Just Color — Semantic Structure Is the Real Problem
advanced · Aug 15
Case Study: Redesigning a Cluttered Dashboard — Where It Went Wrong and How AI Helped Untangle It
cases · Aug 15
Figma vs. Canva vs. Claude Design: Breaking Down Where Each One Actually Fits
comparisons · Aug 15
More Related Topics