Reference extractor

Category: Vibe Coding Prompts

Extract design rules from a screenshot.

Adapted and shared by Product with Attitude, with credit to superdesign.dev.

Prompt / skill content

Here is a screenshot of a UI whose style I want: [attach]. Do NOT copy
it pixel for pixel. Extract its design language into reusable rules:
type scale and pairings, spacing rhythm, color logic (dominant plus
accent), border radius, shadow style, and density.
Append those as a "Reference: [name]" section in DESIGN.md, then build
[screen] in that language using my own content.

Where to get it

Read the original resource.

More in Vibe Coding Prompts

Source Code: Valentine’s Day scratch card app — Sharing the full source code to the Valentine’s Day scratch card app so you can build your own. Copy it, tweak it, ship…
Vibe coding: Drag-drop form builder for webinars and workshops — Every creator wants to design forms for events and workshops. Google Forms is the only free option, but it seems limite…
Vibe coding: AI Rules Files Generator — Generate an AI rules file for your coding environment, with plain-language explanations and beginner-friendly product t…
Vibecoding x Cybersecurity: Survival Guide — The cybersecurity critiques of vibecoding are valid. So instead of debating them, I partnered with an expert to map the…
Prompt Pack: 100 Most Common UI Elements For Vibecoders — A Notion library of 100+ common UI elements with ready-to-use prompts for building interfaces with AI. Entries cover wh…
Animation Pack 001: Hero Section - Breathing Gradient — Make Your Hero Section Feel Alive A tiny motion system for modern landing pages - subtle animation, stronger perceived …
Animation Pack 001: Hero Section - Breathing Gradient — Make Your Hero Section Feel Alive A tiny motion system for modern landing pages - subtle animation, stronger perceived …
Vibe coding: Instantly Fix 401 Errors. An Automated Debug Loop That Runs 30+ Checks and Finds Root Cause — An automated debugging prompt for persistent 401 authentication errors, developed while troubleshooting Google OAuth. I…

← Back to Attitude Vault