17 KiB
17 KiB
animal-island-ui 设计提示词
UI 工具提示词（适用于 v0 / Figma AI / Framer AI / Locofy）
Design a UI in the style of "animal-island-ui" — an Animal Crossing-inspired React component library.
Reproduce every detail below as precisely as possible.
=== FONTS (REQUIRED — load from Google Fonts if not installed) ===
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
font-family: Nunito, 'Noto Sans SC', 'Zen Maru Gothic', -apple-system, 'PingFang SC', sans-serif;
Font weights:
- Body text: 500
- Buttons / headings: 600–700
- Time digits: 900
- Placeholder: 400
- letter-spacing: 0.01–0.02em (wider on buttons/weekday labels)
=== COLOR PALETTE ===
Primary background: #f8f8f0 (warm parchment)
Content area background: rgb(247, 243, 223) (slightly warmer — use for cards, modals)
Page background (homepage): #7DC395 + url(home_bg.svg)
Page background (component page): url(content_bg_pc.jpg) center fixed
Text colors:
Primary (header/sidebar): #794f27
Body (inside components): #725d42
Secondary: #9f927d
Muted: #8a7b66
Disabled: #c4b89e
Placeholder: #c4b89e
Primary accent (mint teal):
Default: #19c8b9 | Hover: #3dd4c6 | Active: #11a89b | Light bg: #e6f9f6
Status:
Success: #6fba2c (active: #5a9e1e)
Warning: #f5c31c (active: #dba90e)
Error: #e05a5a (active: #c94444)
Switch ON green: #86d67a (border: #6fba2c)
Switch OFF gray: #d4c9b4 (border: #c4b89e)
Game-special:
Focus yellow: #ffcc00 (darker: #e0b800) — input focus highlight, NOT blue
Sidebar selected bg: #B7C6E5
Sidebar hover bg: #d6dff0
Modal confirm btn (custom footer): background #ffcc00, color #725d42
Borders:
Standard: 2px solid #9f927d
Input (normal): 2.5px solid #c4b89e | hover: #a89878 | large: 3px
Time component: 3px solid #d4cfc3
3D shadow colors (bottom box-shadow only — NO elevation shadow):
Button: 0 5px 0 0 #bdaea0 | hover: 0 6px | active: 0 1px
Input: 0 3px 0 0 #d4c9b4 | small: 0 2px | large: 0 4px
Switch OFF: 0 3px 0 0 #bdaea0
Switch ON: 0 3px 0 0 #5a9e1e
Card: 0 4px 10px rgba(107, 92, 67, 0.42)
Feature card hover: 0 8px 24px rgba(114, 93, 66, 0.15)
=== SHAPE & RADIUS ===
Buttons and inputs: border-radius: 50px (full pill/capsule — most important)
Default cards: border-radius: 20px
Title cards (organic): border-radius: 40px 35px 45px 38px / 38px 45px 35px 40px
Modals: SVG blob clip-path (see path below)
Sidebar menu items: border-radius: 12px
Collapse panel outer: border-radius: 18px
Version badge: border-radius: 10px
Code block: border-radius: 20px (dark #2b2118, border #3d3028)
Checkbox box: border-radius: 8px (22px square, middle size)
Minimum anywhere: 12px — NO sharp right-angle interactive elements
=== MODAL SVG BLOB CLIP-PATH (exact path) ===
<svg style="position:absolute;width:0;height:0" aria-hidden>
<defs>
<clipPath id="animal-modal-clip" clipPathUnits="objectBoundingBox">
<path d="M0.501,0.005 L0.501,0.005 L0.523,0.005 L0.549,0.006
C0.704,0.01,0.796,0.017,0.825,0.027 L0.827,0.028
C0.872,0.045,0.939,0.044,0.978,0.17
C1,0.254,1,0.365,0.99,0.505 L0.988,0.513
C0.979,0.558,0.971,0.598,0.965,0.633
C0.956,0.689,0.979,0.77,0.964,0.865
C0.953,0.928,0.921,0.966,0.869,0.979
C0.821,0.986,0.773,0.992,0.726,0.995
L0.712,0.996 L0.694,0.997
C0.648,1,0.586,1,0.507,1 L0.501,1 L0.464,1
C0.385,1,0.325,0.998,0.283,0.995
C0.234,0.992,0.184,0.987,0.133,0.979
C0.081,0.966,0.05,0.928,0.039,0.865
C0.023,0.77,0.047,0.689,0.037,0.633
C0.031,0.595,0.023,0.552,0.013,0.505
C-0.006,0.365,-0.002,0.254,0.024,0.17
C0.064,0.045,0.13,0.045,0.174,0.028 L0.175,0.028
C0.204,0.017,0.303,0.009,0.474,0.005 L0.501,0.005"/>
</clipPath>
</defs>
</svg>
Modal content: clip-path: url(#animal-modal-clip); padding: 48px 48px 32px 48px;
=== DEPTH & INTERACTION (Nintendo button press — most defining feature) ===
ALL clickable elements get a bottom box-shadow that simulates a game button:
Default: box-shadow: 0 5px 0 0 #bdaea0; transform: none;
Hover: box-shadow: 0 6px 0 0 #bdaea0; transform: translateY(-1px);
Active: box-shadow: 0 1px 0 0 #bdaea0; transform: translateY(2px);
Cards hover: transform: translateY(-4px) — gentle float, no button press
Switch handle: always has transform: translateY(-2px) — floats above track
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
=== FOCUS STATES ===
Input focus: border-color: #ffcc00; box-shadow: 0 3px 0 0 #e0b800, 0 0 0 3px rgba(255,204,0,0.15)
Button focus: outline: 2px solid #19c8b9; outline-offset: 2px
Switch focus: outline: 2px solid #ffcc00; outline-offset: 2px
=== BUTTON SIZES (exact) ===
small: height 32px, padding 0 16px, font-size 12px, border-radius 12px
middle: height 45px, padding 0 20px, font-size 14px, border-radius 50px
large: height 48px, padding 0 32px, font-size 16px, border-radius 24px
font-weight: 600, letter-spacing: 0.02em, line-height: 1
=== INPUT SIZES (exact) ===
small: height 32px, padding 0 14px, font-size 12px, radius 40px, border 2.5px, shadow: 0 2px 0 0 #d4c9b4
middle: height 40px, padding 0 18px, font-size 14px, radius 50px, border 2.5px, shadow: 0 3px 0 0 #d4c9b4
large: height 48px, padding 0 22px, font-size 16px, radius 50px, border 3px, shadow: 0 4px 0 0 #d4c9b4
Input text: color #725d42, font-weight 500, letter-spacing 0.01em
=== SWITCH SIZES (exact) ===
default: min-width 52px, height 28px, border 2.5px
handle: 21×21px, top 2px, left 2px; ON position: left calc(100%-24px)
box-shadow handle: 0 3px 0 0 #bdaea0 (OFF) / 0 3px 0 0 #5a9e1e (ON)
small: min-width 38px, height 20px, border 2px
handle: 14×14px, top 1px, left 1px; ON position: left calc(100%-16px)
Inner text: font-size 11px, font-weight 700, color #fff, letter-spacing 0.02em
OFF padding: 0 8px 0 28px | ON padding: 0 28px 0 8px
=== LOADING ANIMATION (Button) ===
background-image: repeating-linear-gradient(-45deg, #0ec4b6, #0ec4b6 10px, #01b0a7 10px, #01b0a7 20px);
background-size: 28.28px 28.28px;
animation: animal-btn-loading 1s linear infinite;
@keyframes animal-btn-loading { 0% { background-position: 0 0; } 100% { background-position: -28.28px 0; } }
=== ACCORDION (Collapse) — no JS ===
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
expanded: grid-template-rows: 1fr;
inner wrapper: overflow: hidden;
=== TIME DISPLAY ===
Container: padding 16px 36px, gap 24px, background linear-gradient(180deg, #fff 0%, #f8f8f0 100%),
border 3px solid #d4cfc3, border-radius 18px
Date section right border: 3px solid rgba(159, 146, 125, 0.35), padding-right 24px
Weekday: color #6fba2c, font-weight 900, font-size 14px, letter-spacing 1.5px, UPPERCASE
Month/day: color #8b7355, font-weight 800, font-size 22px
Time digits: color #8b7355, font-weight 900, font-size 48px, letter-spacing 2px
Colon blink: animation blink 1s step-end infinite; @keyframes blink { 50% { opacity: 0; } }
=== SIDEBAR LAYOUT ===
Width: 220px, background: url(menu_bg.svg) center/cover no-repeat
Header: padding 20px 16px 12px, font-size 15px, font-weight 700, color #725d42
Category labels: font-size 11px, color #a0936e, font-weight 600, letter-spacing 0.5px, uppercase
Menu items: height 40px, padding-left 26px, font-size 14px, font-weight 600
inactive: color #8a7b66 | hover: background #d6dff0 | active: background #B7C6E5, color #fff
border-radius: 12px, margin: 1px 5px, transition: all 0.15s
=== NOOKPHONE CARD PALETTE (13 colors, incl. default) ===
default rgb(247,243,223) (#725d42 text) /
app-pink #f8a6b2 / purple #b77dee / app-blue #889df0 / app-yellow #f7cd67 (#725d42 text) /
app-orange #e59266 / app-teal #82d5bb / app-green #8ac68a / app-red #fc736d /
lime-green #d1da49 (#3d5a1a text) / yellow-green #ecdf52 (#725d42 text) /
brown #9a835a / warm-peach-pink #e18c6f
=== DECORATIVE ELEMENTS ===
- Collapse: teal circle icon (28px, #19c8b9 bg) with +/− that rotates 180° on expand
- Collapse: leaf SVG decoration, opacity 0.5→1, rotates 45° on expand
- Footer sea: SVG ocean wave illustration, height 80px, object-fit: contain
- Footer tree: webp forest image, height 60px, background-position: bottom center
- Dividers: illustrated lines (brown/teal/white/yellow/wave) — 12px height PNG/SVG
- Cursor: custom game-style finger pointer PNG
- Backgrounds: nature illustrations (leaf texture sidebar, island scene homepage)
=== NOOKPHONE DEVICE (decorative widget) ===
Phone shell: width 527px, height 788px, background #F8F4E8,
border-radius 136px (almost capsule), overflow hidden
Home screen: padding-top 40px, background #F8F4E8,
background-size 100% 200%, animation grasswave 8s ease-in-out infinite
(@keyframes grasswave { 0%,100% { background-position: 0% 0%; } 50% { background-position: 0% 100%; } })
Top bar: wifi icon (79×29) ← time 32px/800/letter-spacing 2px color #DDDBCC → location icon (36×36)
Colon blink: animation blink 1s steps(1) infinite (0–50% opacity 1, 51–100% opacity 0)
Welcome text: 48px / 800 / color #725C4E / letter-spacing 2px / margin-top 20px
Apps grid: grid-template-columns: repeat(3, 1fr); gap 32px; padding 8px
App tile: 123×123px, border-radius 45px, flex center
App icon: background-size 70% auto (iconApp only: 100% auto)
Hover bounce: @keyframes iconBounce (0% scale 1 rotate 0, 50% scale 1.2 rotate -5deg, 100% scale 1.1 rotate -4deg), 0.3s ease-in-out forwards
Badge dot: 28×28 circle, top 0 left 0, background #FF544A, border 5px solid #F8F4E8
Page indicator: page svg 65×32, margin-top 74px
App palette: camera #B77DEE, app #889DF0 (with offset), critterpedia #F7CD67, diy #E59266,
shopping #F8A6B2, variant #82D5BB, design #8AC68A, map #FC736D, chat #D1DA49
=== FOOTER DECORATION ===
<Footer type="sea" /> width 100%, height 80px, background url(footer-sea.svg) center/contain no-repeat
(SVG viewBox 0 0 1440 186, coral #EC7175 / ocean #327A93 / #98D2E3 / #008077)
<Footer type="tree" /> (default) width 100%, height 60px, background url(footer-tree.webp) bottom center/cover
=== DIVIDER DECORATION ===
5 types — all width 100%, height 12px, background center/contain no-repeat:
line-brown (default, SVG viewBox 0 0 297 14, fill #D8D0C3)
line-teal (SVG)
line-white (PNG)
line-yellow (SVG)
wave-yellow (SVG)
=== CURSOR WRAPPER ===
<Cursor>{children}</Cursor> — applies ".animal-cursor, .animal-cursor * { cursor: url(cursor-icon.png) 4 0, auto !important; }"
Hotspot coordinates: (4, 0). Uses !important to override all child cursors.
=== TYPEWRITER (no markup wrapper) ===
Props: children (ReactNode), speed=90ms, trigger (any unknown; change to restart),
autoPlay=true, onDone?: () => void
Behavior: recursively truncates ReactNode tree by character count while preserving
element structure, className, and inline styles. Returns a plain fragment
(NO extra wrapping div/span) so it has ZERO layout impact.
=== COMPONENT INVENTORY (17 exports from src/index.ts) ===
Interactive: Button, Input, Switch, Modal, Collapse, Select, Tabs, Checkbox
Containers: Card (13 NookPhone colors)
Decorative: Time, Phone, Footer, Divider, Cursor, Typewriter, Icon, CodeBlock
=== CHECKBOX (sizes small 18 / middle 22 / large 28 px) ===
Unchecked box: background rgb(247,243,223); border 2.5px solid #c4b89e; border-radius 8px
Hover box: border-color #19c8b9; transform translateY(-1px)
Checked box: background #19c8b9; border-color #11a89b
Checkmark ✓: color #fff, font-weight 700, pop animation 0.15s
Label: color #725d42 (hover #794f27), font-weight 500, letter-spacing 0.01em
Focus ring: outline 2px solid #ffcc00; outline-offset 2px
Disabled: opacity 0.55, box bg #f0ece2, border #d4c9b4, label #c4b89e, cursor not-allowed
Group layout: horizontal flex gap 12px / vertical flex-direction column gap 8px
Per-option label font-size by size: small 12px / middle 14px / large 16px
=== CODE BLOCK (dark theme, JSX/TS only) ===
Container: padding 20px 24px; background #2b2118; border 1px solid #3d3028;
border-radius 20px; font-size 14px; line-height 1.7; tab-size 4;
font-family 'SF Mono','Fira Code','Cascadia Code',Consolas,monospace; font-weight 600;
white-space pre; overflow auto; color (default) #e8d5bc
Token colors:
comment #6b5e50 (/* */, //)
string #a8d4a0 (quoted strings, numeric literals)
keyword #d4a0e0 (import/export/const/return/true/false/null/async/await/type/interface...)
react #e06c75 (React, useState, useEffect, FC, ReactNode, CSSProperties...)
component #80c0e0 (PascalCase identifiers — JSX tags / type names)
func #61afef (lowercase identifier followed by `(`)
prop #e8c87a (identifier followed by `=`)
jsx #f0a870 (`<Tag`, `</Tag`, `/>`)
operator #d4b896 (`{}[]();,` and arithmetic / comparison / logical operators)
=== FORBIDDEN PATTERNS ===
✗ Sharp right-angle (0px radius) on any interactive element
✗ Pure black #000 or #111 text — always use warm brown tones
✗ Cold blue focus rings (#0066ff etc.) — use #ffcc00 or #19c8b9
✗ Cold gray backgrounds — always warm parchment
✗ Flat design without bottom box-shadow on interactive elements
✗ font-weight below 400 anywhere in the UI
✗ System monospace fonts for UI text (code blocks excluded)
图片生成提示词（适用于 Midjourney / DALL-E / Stable Diffusion）
Pixel-perfect UI screenshot of "animal-island-ui" React component library website,
Animal Crossing Nintendo Switch life-sim game aesthetic,
Interface details:
- Warm parchment background rgb(247,243,223), NEVER pure white
- Pill-shaped buttons (border-radius 50px) with 3D bottom shadow in warm taupe #bdaea0,
buttons press down on click like Nintendo game buttons
- Organic blob-shaped modal dialog with irregular soft SVG silhouette
- Pastel NookPhone app icon color cards: pink #f8a6b2, lavender #b77dee, sky blue #889df0,
sunshine yellow #f7cd67, coral #e59266, seafoam #82d5bb, sage green #8ac68a
- Mint teal accent #19c8b9, warm brown text #725d42
- Sidebar 220px wide with leaf texture background, menu items highlight in light blue #B7C6E5
- Nunito rounded font family (Google Fonts), weight 600-700, friendly chubby letterforms
- Yellow focus highlight #ffcc00 on focused inputs (NOT blue)
- Switch toggle with floating 3D handle, green #86d67a when ON
- Collapse accordion with teal circle icon, leaf SVG decoration
- Time widget showing weekday in green #6fba2c, large 48px clock digits
- Nature decorations: leaf SVG icons, illustrated ocean wave footer, forest tree silhouette
- Diagonal stripe loading animation on active buttons
- Custom game-style finger cursor icon
- Soft warm diffuse lighting, cozy pastoral atmosphere, flat illustration style
- 4K resolution, UI design mockup
关键数值速查表
| Token | 精确值 | 用途 |
|---|---|---|
| 内容区背景 | rgb(247, 243, 223) |
Modal、Card 内容区 |
| 主背景 | #f8f8f0 |
按钮、通用背景 |
| 正文文字 | #725d42 |
组件内正文 |
| Header 文字 | #794f27 |
侧边栏、标题 |
| 主色调 | #19c8b9 |
焦点环、Collapse 图标 |
| Switch ON 绿 | #86d67a |
Switch 开启背景 |
| 成功绿 | #6fba2c |
星期文字、成功状态 |
| 按钮 3D 阴影 | #bdaea0 |
0 5px 0 0 #bdaea0 |
| 输入框 3D 阴影 | #d4c9b4 |
0 3px 0 0 #d4c9b4 |
| 焦点黄 | #ffcc00 |
输入框 focus |
| Modal 确认按钮 | bg #ffcc00, color #725d42 |
游戏黄主操作 |
| 侧边栏选中 | #B7C6E5 |
菜单 active |
| 侧边栏 hover | #d6dff0 |
菜单 hover |
| 按钮高度（中） | 45px |
middle size |
| pill 圆角 | 50px |
按钮、输入框 |
| 有机圆角 | 40px 35px 45px 38px / 38px 45px 35px 40px |
title Card |
| 字体 | Nunito, 'Noto Sans SC', 'Zen Maru Gothic' |
Google Fonts 加载 |
| 按钮字重 | 600 |
按钮文字 |
| 时间数字字重 | 900 |
Time 组件 |
| 过渡 | 0.25s cubic-bezier(0.4,0,0.2,1) |
通用动画 |
| Loading stripe | 28.28px step, -45deg, #0ec4b6/#01b0a7 |
按钮 loading |
| 侧边栏宽度 | 220px |
Desktop sidebar |
| Phone 外壳 | 527 × 788px，border-radius: 136px |
NookPhone 容器 |
| Phone app tile | 123 × 123px，border-radius: 45px |
3×3 网格 |
| Phone 新消息点 | 28px 红圆 #FF544A + 5px 奶油描边 #F8F4E8 |
badge |
| Footer sea | height: 80px，SVG contain |
海浪底部 |
| Footer tree | height: 60px，webp cover bottom |
森林底部 |
| Divider | height: 12px，5 种背景图 |
装饰分割线 |
| Cursor | cursor: url(...) 4 0, auto !important |
游戏手指光标 |
| Typewriter 默认速度 | 90ms/字 |
按字符打印，无包裹元素 |
| Google Fonts URL | fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Zen+Maru+Gothic:wght@400;500;700&display=swap |
在线加载 |