Tuscan Trattoria UI
SkillStack Official
Warm-paper Tuscan trattoria restaurant UI — sunlit linen backgrounds, terracotta rules, fig-dark contrast sections, Fraunces editorial serif, printed-carta menus with dotted leaders, and masked-reveal motion. Two live demos: a trattoria landing page and a full printed carta with reservations.
Build me a warm Tuscan trattoria website with a printed menu and table reservations, in the style of Osteria del Fico.
What you get
- A complete Tuscan trattoria design system — SKILL.md with workflow, design tokens, components, motion patterns and copy voice; three reference files with exact hex tokens, component specs and paste-ready code; two live demo pages (landing page + printed carta menu with reservations), all hand-drawn SVG, zero stock photos.
Good fit
- Italian restaurants, trattorias and osterias; farm-to-table and vineyard-table brands; any warm editorial food brand that needs a printed-carta menu and a reservation flow.
Not for
- Dark fine-dining sites, fast-food or delivery-first brands, or minimal white product launches.
- Name
- Tuscan Trattoria UI
- Downloads
- 1
- Category
- Design
- Skills inside
- 1
Download & install
What's new: v1.0.0 — Warm-paper Tuscan trattoria UI. SKILL.md + design tokens, components and snippets references. Two demos: landing page (masked hero reveal, scroll-scaled SVG scene, dish filters, counters, marquee, FAQ) and printed carta menu page (five courses with dotted leaders, sticky category board, dish detail panel, reservation form with confirmation code). Fraunces + Inter bundled as local woff2.
Free for signed-in users.
1. Download the ZIP
Use the button above to download the packaged skill. It contains the SKILL.md plus all supporting files.
2. Unzip into your agent's skills folder
Extract the archive so that SKILL.md sits directly inside a folder named after the skill:
unzip tuscan-trattoria-ui-v1.0.0.zip -d ~/.claude/skills/tuscan-trattoria-ui/Skills folder per agent
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. Restart your agent
Your agent picks up the new skill automatically on next launch. Ask it what it can do.
Like this free skill? Premium unlocks 91 exclusive skills.
One subscription unlocks every premium skill, prompt and pack — plus all future drops.
Reviews
Related skills
Editorial Magazine UI
Editorial Magazine UI
Design print-magazine-style landing pages — oversized serif headlines, ruled columns, drop caps, pull quotes and a single printer's-ink accent. Use when the user asks for editorial / magazine-style landing pages or brand sites.
Claude Code · Codex · Cursor · Copilot +3
Art Deco Glamour UI
Art Deco Glamour UI
Art Deco glamour for luxury interfaces — stepped geometry, sunburst fans, gold hairline rules and jewel-tone palettes for fine jewelry, hospitality and premium brands. Includes a complete token system, 12 components, copy-paste motion snippets, and two working demos for a fictional 1925 jewelry atelier.
Claude Code · Codex · Cursor · Copilot +3
Stripe-Style UI Design
Stripe-Style UI Design
Fintech-grade marketing pages in a gradient-mesh language — luminous white canvas, animated warm-to-cool gradient hero band, thin 300-weight display type with tight tracking, one indigo action color, near-square geometry, deep-navy dashboard mocks. Build fintech landing pages, pricing pages, and API/developer marketing with financial-infrastructure polish.
Claude Code · Codex · Cursor · Copilot +3
Aurora-Glass UI Design
Aurora-Glass UI Design
Dark, high-motion landing pages in the aurora-glass language — drifting multi-color aurora gradients, frosted-glass cards, glow CTAs, mouse parallax, canvas waveforms. Ships tokens, components, snippets, and an animated Prismwave demo.
Claude Code · Codex · Cursor · Copilot +3