The Library
Sear
FreeBuild-verifiedClaude Sonnet 4.6This prompt was scaffolded from scratch by Claude Sonnet 4.6 into a compiling, running app — verified, not just a screenshot.Expo Router + React Native + NativeWindCook on purpose.
mobilecookingrecipesdarkphotographyfoodrecipekitchenchefmealtimerpantryappculinaryeditorialtechnique
How the prompts work
Preview
▒ best build path
Standard web or mobile UI
Use first
Lovable
Bolt
v0
Also works
Cursor
Codex
Claude Code
Use app builders from zero. Use coding agents when this design is going into an existing repo. Paste the full Library prompt first, then compare the result against the live demo.
01Tonightv1
↳ 402 × 874 · iPhone 15 Pro
02Recipev1
↳ 402 × 874 · iPhone 15 Pro
03Pantryv1
↳ 402 × 874 · iPhone 15 Pro
04Skillsv1
↳ 402 × 874 · iPhone 15 Pro
05Design System — Mobilev1 · cataloged
▒ system
Open Flame
chef-dark · analogous · seed #c8472e
▒ palette
primary
secondary
tertiary
neutral
success
warning
danger
Aa typography
Display
Headline — Fraunces
Body set in Figtree. The quick brown fox jumps over the lazy dog. 0123456789.
⌬ components
PrimarySecondaryAccentTagTag
▱ shape · radius 0.875px
0px
4px
8px
12px
16px
↳ deterministic · no model call
✦ Components in use
Sear
Extracted from 4 drafted screens · ready for the next agent
▒ Molecules
HeatSegment↳ Recipe
A single proportional block in the timeline representing a cooking phase, colored by heat intensity using var(--accent) for peak heat and var(--muted-foreground) for rest.
role · Visually encodes the duration and thermal intensity of a specific recipe step.
PantryItemRow↳ Pantry
A horizontal layout displaying an ingredient glyph, name, monospaced quantity, and a low-stock indicator using var(--destructive) or var(--accent).
role · Provides a scannable inventory line item for smart pantry management.
IngredientGlyph↳ Pantry
A 24x24 single-stroke inline SVG illustration of an ingredient utilizing a consistent warm umber stroke (var(--icon-stroke)) and 1.5px weight.
role · Replaces generic clip-art with bespoke, technical line-art to elevate the visual aesthetic.
SkillProgressRow↳ Skills
A horizontal composition of a technique label, a 5-segment discrete progress bar, and a mastery tier text badge.
role · Tracks and displays the user's proficiency in specific culinary techniques.
PremiumTabIcon↳ Tonight · Recipe · Pantry · Skills
A dual-state SVG icon that transitions between a 1.5px outline and a solid fill with internal negative-space strokes for the active state.
role · Provides a premium, tactile feel to the bottom navigation active states.
▱ Patterns
SegmentedProgressVisualization
Using discrete, evenly spaced blocks (like 5-segment skill bars or 7-day streaks) to represent progress or time rather than continuous progress lines, emphasizing technique milestones.
MonolineIconography
Applying a strict 1.5px stroke weight, round caps/joins, and warm umber tones to all custom inline SVG glyphs to maintain a hand-drawn, technical blueprint aesthetic.
HeatColorEncoding
Mapping color opacity and warmth (from translucent var(--muted-foreground) to peak var(--accent)) to represent physical temperature and intensity phases in timelines.
⌬ Organisms
HeatTimelineBar↳ Recipe
A continuous horizontal bar composed of multiple HeatSegments that visualizes the total cooking time and thermal phases of a recipe.
composition · Horizontal flex row with flex-grow values proportional to the minute duration of each segment.
PantryCategorySection↳ Pantry
A grouped list containing a bold category header and a vertical stack of PantryItemRows separated by subtle var(--border) dividers.
composition · Vertical stack with a prominent header followed by a dense list of rows.
WeeklyStreakTracker↳ Skills
A horizontal 7-day grid visualizing cooking consistency, highlighting completed days and the current day index using var(--accent).
composition · Evenly spaced horizontal grid of 7 discrete day indicators with day-of-week labels below.
BottomTabBar↳ Tonight · Recipe · Pantry · Skills
The persistent global navigation component utilizing PremiumTabIcons with filled/outline state transitions against a var(--card) background.
composition · Fixed bottom horizontal bar with evenly distributed icon and label touch targets.
Aa Typography in use
DisplayLarge, high-contrast numerals (48-64px) used for active heat timers, total minutes, and hero quantities to anchor data-heavy screens.
HeadlineBold, structured sans-serif (18-24px) used for pantry category headers, screen titles, and primary technique names.
BodyClean, highly legible sans-serif (14-16px) used for ingredient names, phase descriptions, and secondary labels in var(--foreground).
MonoMonospaced font (12-14px) used strictly for precise measurements (e.g., '80 g', '200 ml') and exact timing segments to evoke a technical recipe-card feel.
● Accent usage
The accent color (peak flame / warm umber) is strictly reserved for high-heat states (the 'Sear' timeline segment), active mastery indicators (filled skill segments), and critical alerts like low-stock warnings. It is applied with extreme restraint against the dark kitchen ground (var(--background)) and muted foreground tones to draw the eye only to actionable or critical technique data.
↳ machine-readable · cataloger v1
↳ 1080 × auto · specimen
▒ screen prompts
▒ design recipe · what to preserve
▒ assets · download and regenerate
hero full-bleed — Tonight screen, top ~58% photo panel; overhead seared scallops on dark slate
v-1 library license (generated, no third-party rights)
drill card — Skills screen, top ~140px of drill card; overhead onion-dicing on cutting board, dark kitchen
v-1 library license (generated, no third-party rights)
pantry band — Pantry screen, top ~22% photo panel; tomatoes, basil, salt macro on slate
v-1 library license (generated, no third-party rights)
technique band — Recipe screen, top ~34% photo panel; hands searing steak with flames
v-1 library license (generated, no third-party rights)
▒ design handoff
What do you get with the Sear design?
The Sear food design ships as a finished visual system plus the exact AI-builder prompt to rebuild it. You get the design direction, screen set, assets and prompt for Claude Code, Cursor, Bolt.new, v0, Windsurf, Lovable; v-1.design does not export Figma and does not host the final app.
| Category | food |
|---|---|
| Surfaces | mobile |
| Screens | Tonight, Recipe, Pantry, Skills |
| Tools supported | Claude Code, Cursor, Bolt.new, v0, Windsurf, Lovable |
| Price | Free |
| License | Single-use build prompt + assets, not Figma |
How to rebuild this in Lovable, Bolt, Cursor or Claude Code
- Open the Sear design and copy the full build prompt.
- Paste it into your AI builder or coding agent (Lovable, Bolt, v0, Cursor, Claude Code or Codex).
- Generate the design system and core screens from the prompt.
- Edit the copy, data and routing to fit your product.
- Wire it to your backend, or hand the prompt to a developer.
Sear FAQ
- Does this include source code or a prompt?
- You get the exact AI-builder prompt plus the design system and assets, not a code repo. Your AI builder or developer generates the code from the prompt.
- Which AI builders does the Sear prompt work in?
- It is written for Lovable, Bolt, v0, Cursor, Claude Code and Codex, and pastes into any coding agent or hands to a developer.
- Is this a Figma file?
- No. v-1.design does not export Figma. You get a finished design plus the prompt and assets to rebuild it.
- What screens are included?
- The Sear package includes Tonight, Recipe, Pantry, Skills across mobile.
▒ related food designs