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.
你能得到
- 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.
适合场景
- 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.
不适合
- Dark fine-dining sites, fast-food or delivery-first brands, or minimal white product launches.
- 名称
- Tuscan Trattoria UI
- 下载数
- 1
- 分类
- 设计
- 包含 skills
- 1
下载与安装
更新内容: 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.
登录用户免费下载。
1. 下载 ZIP
点击上方按钮下载打包好的 skill，内含 SKILL.md 及全部配套文件。
2. 解压到 agent 的 skills 目录
解压后确保 SKILL.md 直接位于以 skill 命名的文件夹内：
unzip tuscan-trattoria-ui-v1.0.0.zip -d ~/.claude/skills/tuscan-trattoria-ui/各 Agent 的 skills 目录
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. 重启你的 agent
下次启动时 agent 会自动识别新 skill，直接问它能做什么。
喜欢这个免费 skill？Premium 解锁 91 个独家 skills。
一次订阅，解锁全部高级 skill、prompt 和内容包，以及未来的每一期新品。
评价
相关技能
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