Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
This skill guides systematic visual refinement of Flutter/Dart UI through a 7-checkpoint interactive process, helping you define and apply a consistent visual identity across the app. It transforms functional but unpolished UI into cohesive, well-designed interfaces with clear personality.
When to Use This Skill
Trigger phrases:
"Polish the UI for [screen/component]"
"This screen feels unfinished visually"
"Help me style [component]"
"Define visual design for the app"
"Make this look more professional"
Use cases:
New Feature Polish - Feature works but needs visual refinement
Purpose: Understand current state and identify specific visual gaps
Output format:
UI Styling & Visual Polish
CHECKPOINT 1: Visual Analysis
─────────────────────────────────────────
Current State Analysis:
Component/Screen: [Name]
Current visual elements:
- Colors: [Describe current color usage]
- Typography: [Font choices, sizes, hierarchy]
- Spacing: [Padding/margin patterns]
- Component styling: [Borders, shadows, shapes]
- Overall coherence: [Assessment]
Specific Visual Gaps Identified:
1. **Inconsistency:** [What feels inconsistent?]
- Example: Different button styles across screens
- Impact: Confusing, unprofessional
2. **Lack of Personality:** [What lacks character?]
- Example: Generic Material defaults, no brand identity
- Impact: App feels generic, forgettable
3. **Unfinished Elements:** [What looks incomplete?]
- Example: Placeholder spacing, default colors
- Impact: Prototype-like appearance
4. **Visual Hierarchy Issues:** [What's competing for attention?]
- Example: Everything same size/weight
- Impact: Hard to scan, unclear focus
5. **Other Issues:** [Additional concerns]
Does this analysis match your perception of the visual gaps?
Any additional concerns I should note? (y/n/more)
Analysis guidelines:
Color assessment:
Are colors used consistently?
Is there a clear primary/secondary color scheme?
Do colors have semantic meaning (success, error, etc.)?
Are there too many different colors?
Typography assessment:
Is there a clear hierarchy (headings vs. body)?
Are font sizes appropriate for mobile?
Is text readable (contrast, line height)?
Are weights used effectively?
Spacing assessment:
Is spacing consistent (same padding in similar contexts)?
Does spacing create visual grouping?
Is spacing proportional (not cramped or too loose)?
Component styling assessment:
Are interactive elements clearly clickable?
Is visual feedback consistent (hover, pressed, disabled)?
Do components have appropriate visual weight?
Are borders/shadows used consistently?
Wait for user response before proceeding.
Checkpoint 2: Identity Definition
Purpose: Define the visual personality for the feature/app
When to use:
Visual identity is not yet established
App uses generic Material defaults
Multiple developers have created different visual styles
Preparing for brand consistency
When to skip:
Visual identity already documented
Working within established design system
Minor component polish only
Output format:
─────────────────────────────────────────
CHECKPOINT 2: Identity Definition
Visual Personality Definition:
App Purpose: [Describe what the app does]
Target Users: [Who uses this app]
Desired Visual Personality (3-5 adjectives):
1. [Adjective 1] - [Why this matters for users]
2. [Adjective 2] - [How this reflects app purpose]
3. [Adjective 3] - [What this communicates]
What This App Is NOT:
- Not [quality/style to avoid] - [Why]
- Not [quality/style to avoid] - [Why]
Visual Influences:
- [Reference or theme] - [Why relevant]
- [Cultural considerations] - [For PT-BR audience]
Long-term Vision:
[How should this app evolve visually over time?]
Example Personality:
For Gastrobrain (meal planning app):
- **Warm and approachable** - Food is personal and emotional
- **Clear and organized** - Planning requires clarity
- **Confident and trustworthy** - Users rely on recommendations
- **Not overly playful** - Respect user's time
- **Not minimalist cold** - Food deserves warmth
Does this visual identity feel right for your vision?
Any adjustments needed? (y/n/adjust)
Identity definition guidelines:
Choose personality adjectives carefully:
Specific over generic ("warm" vs. "good")
Actionable in visual terms (can translate to color, typography)
Reflect user needs and app purpose
Avoid contradictions (can't be both "minimal" and "rich")
Define what the app is NOT:
Prevents clichés and overused patterns
Clarifies boundaries
Guides against inappropriate choices
Consider cultural context:
Brazilian users may have different aesthetic preferences
✓ Tested on small screen (320px width)
✓ Tested on standard screen (375px width)
✓ Tested on large screen (414px width)
✓ Tested with long Portuguese text
✓ All touch targets ≥44px
✓ flutter analyze passes
✓ No visual regressions on other screens
─────────────────────────────────────────
Do the changes work as expected? Any issues or adjustments needed?
(y/n/issues)
**Implementation guidelines:**
**Code quality:**
- Use Theme.of(context) for themeable values
- Create const constructors where possible
- Extract reusable styles to theme or constants
- Follow Flutter best practices (Key usage, etc.)
**Testing approach:**
- Visual inspection on multiple screen sizes
- Test with real content (not just placeholder)
- Check both languages if bilingual
- Verify no performance degradation
- Ensure accessibility maintained
**Common Flutter patterns:**
```dart
// Using theme colors
color: Theme.of(context).colorScheme.primary
// Using text theme
style: Theme.of(context).textTheme.bodyLarge
// Custom theme extension
extension CustomColors on ColorScheme {
Color get customColor => Color(0xFF...);
}
// Spacing constants
class Spacing {
static const double xs = 4.0;
static const double sm = 8.0;
static const double md = 16.0;
// ...
}
Wait for user response before proceeding.
Checkpoint 6: Refinement Iteration
Purpose: Polish based on visual review
Output format:
─────────────────────────────────────────
CHECKPOINT 6: Refinement Iteration
Visual Review Results:
✓ Visual Balance & Harmony:
- Colors work well together
- Spacing feels proportional
- Elements don't compete
⚠ Consistency Check:
- Issue: Button padding inconsistent in dialogs vs. screens
- Fix: Standardize to 12px vertical, 24px horizontal
✓ Design Token Compliance:
- All colors from defined palette
- Typography follows scale
- Spacing uses system values
⚠ Unintended Issues:
- Issue: Recipe card title wraps awkwardly on small screens
- Fix: Adjust line height from 1.2 to 1.4
✓ Edge Cases Verified:
- Long text handling: ✓ Ellipsis added
- Empty states: ✓ Styled consistently
- Loading states: ✓ Skeleton screens match design
─────────────────────────────────────────
Refinement Changes:
Change 1: Standardize button padding
[Code changes]
Change 2: Improve recipe card title line height
[Code changes]
Change 3: [Other refinements]
─────────────────────────────────────────
Does this feel polished and ready? Any final adjustments?
(y/n/adjust)
Refinement guidelines:
Visual balance:
Step back and look at the whole screen
Is any element too dominant or too subtle?
Does spacing create natural grouping?
Is there a clear focal point?
Consistency check:
Compare similar elements across screens
Verify same patterns used everywhere
Check that exceptions are intentional
Edge cases to test:
Very long text (recipe names, ingredient lists)
Very short text (single word buttons)
Empty states (no data)
Loading states
Error states
Disabled states
Pressed/active states
Common refinements:
Adjust spacing by 4-8px for better balance
Tweak font size by 1-2sp for readability
Lighten/darken colors slightly for contrast
Add subtle shadows for depth
Adjust line height for text wrapping
Wait for user response before proceeding.
Checkpoint 7: Pattern Documentation
Purpose: Capture reusable patterns for future use
Output format:
─────────────────────────────────────────
CHECKPOINT 7: Pattern Documentation
Design Tokens Documentation:
File: docs/design/design-tokens.md
# Gastrobrain Design Tokens
## Color System
[Document colors with usage guidelines]
## Typography System
[Document type scale with examples]
## Spacing System
[Document spacing scale with common uses]
## Component Styling
[Document border radius, shadows, etc.]
─────────────────────────────────────────
Component Patterns Created:
1. **Styled Card Pattern**
- Usage: Recipe cards, meal cards
- Code:
```dart
Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(12),
boxShadow: [/* elevation level 1 */],
),
padding: EdgeInsets.all(16),
child: child,
)
Primary Button Pattern
Usage: Main actions
Code: [Pattern]
[Continue for each pattern...]
─────────────────────────────────────────
Before/After Insights:
What Changed:
Primary color changed from default blue to warm orange
Typography hierarchy clarified (larger headings)
Consistent card styling across app
Spacing standardized to 8px base unit
Visual Impact:
App feels warmer and more food-focused
Information hierarchy clearer
More professional and cohesive
Better reflects meal planning purpose
Lessons Learned:
Consistent spacing has huge impact on polish
Typography hierarchy requires more contrast than expected
Shadow elevation needs to be subtle for food app
[Other insights]
─────────────────────────────────────────
Patterns Applicable to Other Screens:
Recipe List Screen - Apply same card pattern
Meal History Screen - Use same typography hierarchy
Ingredient Selection - Match button styling
[Continue...]
─────────────────────────────────────────
Is this documented clearly for future use?
(y/n/adjust)
**Documentation guidelines:**
**Design tokens:**
- Document in markdown for easy reference
- Include visual examples if possible
- Explain usage guidelines (when to use each color)
- Update as tokens evolve
**Component patterns:**
- Extract reusable patterns into widgets
- Document props/parameters
- Show code examples
- Explain when to use vs. alternatives
**Insights capture:**
- Document what worked well
- Note what didn't work and why
- Record lessons for future polish work
- Identify patterns to propagate
**Wait for user response. Once confirmed, polish work is complete.**
---
## Integration with Gastrobrain Workflow
### Related Skills
**Works well with:**
- **UI Component Implementation Skill** - Polish after creating new components
- **Feature Implementation** - Add polish checkpoint after functionality complete
- **Code Review Skill** - Include visual review in pre-merge checks
**Timing in workflow:**
- **Early:** Define visual identity for new features before implementation
- **Mid:** Polish functional screens that lack visual refinement
- **Late:** Systematic polish pass before milestone releases
### Branch Workflow
```bash
# Create polish branch
git checkout develop
git pull origin develop
git checkout -b ui/polish-recipe-screen
# After completing checkpoints
git add .
git commit -m "ui: polish recipe screen with consistent design tokens
- Define color system with warm primary palette
- Establish typography hierarchy (24sp/18sp/16sp)
- Apply 8px spacing system throughout
- Add subtle elevation to cards
- Improve visual consistency"
# Merge when complete
gh pr create --title "ui: polish recipe screen visual design"
Localization Considerations
When polishing UI:
Test with both EN and PT-BR text
Portuguese text often 20-30% longer
Ensure wrapping works for both languages
Verify translated text fits in designed spaces
Consider cultural color meanings (white=mourning in some cultures)
Testing After Polish
# Visual regression testing (if tools available)
flutter test --update-goldens # Update golden image tests# Manual verification checklist
- [ ] Test on smallest target screen (320px)
- [ ] Test on largest target screen (414px+)
- [ ] Test with longest translated strings
- [ ] Verify touch targets ≥44px
- [ ] Check contrast ratios (WCAG AA)
- [ ] Verify no performance impact
# Automated checks
flutter analyze # No new warnings
flutter test# All tests pass
✅ Provide systematic visual refinement process
✅ Define concrete design tokens
✅ Apply consistent styling patterns
✅ Document reusable visual patterns
✅ Balance visual personality with usability
✅ Consider cultural and language factors
✅ Test across screen sizes and contexts
What This Skill DOES NOT Do
❌ Make changes without user confirmation
❌ Apply arbitrary styling without rationale
❌ Ignore Material Design guidelines
❌ Create visual designs from scratch (not a design tool)
❌ Override functional requirements for aesthetics
❌ Skip accessibility considerations
❌ Ignore localization impacts
Quality Checklist
Before completing polish work, verify:
Visual Consistency:
Colors used consistently across similar elements
Typography hierarchy clear and consistent
Spacing follows defined system
Component styling patterns applied uniformly
Design Tokens:
All colors from defined palette
All font sizes from type scale
All spacing values from spacing system
All border radius/shadows from system
Usability:
Touch targets ≥44px for interactive elements
Contrast ratios meet WCAG AA (4.5:1 for text)
Visual hierarchy guides user attention appropriately
Interactive elements clearly identifiable
Localization:
Tested with both EN and PT-BR text
Layout handles longer Portuguese strings
Text wrapping works in both languages
Cultural color considerations addressed
Technical:
flutter analyze passes with no warnings
No performance regressions
Theme configuration properly used
Patterns documented for reuse
Documentation:
Design tokens documented
Component patterns extracted and documented
Before/after insights captured
Future polish patterns identified
Success Metrics
The UI polish is successful when:
✅ Visual consistency across similar elements
✅ Clear visual hierarchy that guides users
✅ App feels designed, not assembled
✅ Visual personality aligns with app purpose
✅ Design tokens are documented and reusable
✅ User confirms improved polish
✅ No regressions in functionality or performance
✅ Patterns applicable to other screens identified
Common Pitfalls to Avoid
Visual Design:
Mixing too many different styles (pick one personality)
Arbitrary spacing (use consistent scale)
Poor typography hierarchy (size differences too subtle)
Colors without semantic meaning (why this color here?)
