Keep the brand recognizable
Start with approved logos, colors, type, and imagery. Change them only for a stated reason.
YY Rum / Design resources
Start with intent.
Finish with proof.
Turn an idea into a precise design brief. Define the visual direction, interactions, and finish line before asking your assistant to build.
01 / Make the brief
A useful prompt names the result.
Choose a starting point, edit the details, then copy your brief into the design assistant you use. This page builds text on your device. It does not send your prompt to an AI service.
02 / The formula
Eight decisions before the first build.
- Format
Name the page, tool, scene, or asset and its purpose.
- World
Set the brand, palette, type, mood, and references.
- Hero
Choose the main message and focal element.
- Interaction
Describe what each control does and how it responds.
- Modes
Define screen sizes, demo states, and motion preferences.
- Quality
Make accessibility, performance, and accuracy explicit.
- Capture
Specify the views and behaviors to inspect.
- Done
State the evidence required before calling it complete.
03 / Design principles
Give the design a clear job.
Make the main action obvious
Use one clear primary action. Explain its result before the visitor commits.
Keep words usable
Render essential copy as HTML. Use headings, labels, alt text, and descriptive links.
Design states, not screenshots
Include loading, empty, error, success, and offline behavior where relevant.
Use motion with a purpose
Guide attention with restrained timing. Offer pause and a static reduced-motion experience.
Improve one layer at a time
Review layout, then typography, contrast, interactions, and performance. Preserve working behavior.
04 / The finish line
Review the behavior and the evidence.
A polished preview is one check. A finished feature also needs working controls, truthful content, and verification in its intended environment.
- ContentVerify claims, prices, dates, permissions, and asset ownership. Label sample content.
- AccessibilityUse the page with a keyboard. Check focus, labels, contrast, and reduced motion.
- MobileCheck narrow layouts, readable copy, touch targets, and scrolling without clipping.
- FunctionExercise navigation and the main task. Check empty, loading, success, and error states.
- PerformanceSize media for its display. Keep essential content readable while assets load.
- ReleaseKeep a backup, review the changes, and verify the intended published page after deployment.