Appearance
提取 UI 图的 JSON Schema
如果你需要反向 UI 图的提示词，可以考虑把图片提取成 JSON 格式，把各种常见参数都照顾到，但要想精准还原还是有些难度，下面的提示词也只是作为一个参考。UI 图风格提取的提示词参考：
You are a professional visual-style analyst.
Analyze the attached image carefully and return **ONLY valid JSON** strictly following the provided json schema.
Feel free to include additional keys or detailed comments if needed to clarify artistic choices.
**JSON Schema**:
'''json
{
"scene": "string", // 描述整体场景内容和核心主题（如角色与背景关系）
"subjects": [
{
"type": "string", // 主体类型（人物、物体或概念）
"description": "string", // 详细外观描述与艺术特点
"position": "string" // 在画面中的位置与布局关系
}
],
"style": "string", // 艺术风格或渲染方式（如皮克斯风格3D角色插画）
"color_palette": [ // 主要色系 (3-7个色彩，注意和谐与视觉表达)
"string"
],
"lighting": "string", // 光照类型、方向、阴影效果
"mood": "string", // 场景整体传达的情绪氛围
"composition": "string", // 构图方式和视角特点
"camera": {
"angle": "string", // 摄影机角度（如正面、低角度、微仰视）
"distance": "string", // 与主体的距离（如中距离特写、近景）
"lens": "string" // 镜头特性（广角、中距、望远镜头）
},
"typography": {
"text": "string", // 画面中的文字内容
"font_style": "string", // 字体风格（如极简黑色无衬线字体）
"position": "string" // 字体在画面中的位置与布局
},
"symbolism": {
"concept": "string", // 画面中的象征意义、隐喻或艺术概念
"representation": "string" // 如何通过视觉表达实现这一象征意义
},
"rendering_details": {
"textures": "string", // 材质和纹理的细节描述
"effects": "string" // 特殊视觉效果（如颗粒感、光斑、梦幻效果）
}
}
'''举个例子：
输入图为：
输出 JSON SCHEMA
json
{
"scene": "A user interface (UI) screen for managing account settings and profile information within a web application.",
"subjects": [
{
"type": "UI Element - Navigation Menu",
"description": "A vertical navigation menu on the left side with items like 'Profile', 'Account', 'Appearance', 'Notifications', and 'Display'. 'Profile' is highlighted, indicating it's the active section.",
"position": "Left column, occupying roughly the top half of the visible left section."
},
{
"type": "UI Element - Form",
"description": "The main content area displays a form for editing the 'Profile'. It includes fields for 'Username', 'Email', 'Bio', and 'URLs'. Input fields, dropdowns, and buttons are present.",
"position": "Right column, occupying the majority of the screen space."
},
{
"type": "UI Element - Text Content",
"description": "Various text elements including section titles ('Settings', 'Profile'), field labels ('Username', 'Email', 'Bio', 'URLs'), placeholder text, instructional text, and button labels ('Add URL', 'Update profile').",
"position": "Distributed throughout the UI, associated with their respective elements."
}
],
"style": "Minimalist, clean, modern web UI design.",
"color_palette": [
"#FFFFFF",
"#F3F4F6",
"#111827",
"#6B7280",
"#4B5563"
],
"lighting": "Flat, even, shadowless lighting typical of digital interfaces. Subtle drop shadows are used for depth on the active navigation item and buttons.",
"mood": "Functional, organized, professional, user-friendly.",
"composition": "Two-column layout. The navigation menu is on the left, and the main content area (profile settings form) is on the right. Elements are aligned on a grid, with clear visual hierarchy.",
"camera": {
"angle": "Straight-on, eye-level (as if viewing a screen directly).",
"distance": "Medium shot, showing the entire relevant section of the settings page.",
"lens": "Orthographic projection (typical for UI design, no perspective distortion)."
},
"typography": {
"text": "Settings, Manage your account settings and set e-mail preferences., Profile, Account, Appearance, Notifications, Display, Profile, This is how others will see you on the site., Username, shadcn, This is your public display name. It can be your real name or a pseudonym. You can only change this once every 30 days., Email, Select a verified email to display, You can manage verified email addresses in your email settings., Bio, I own a computer., You can @mention other users and organizations to link to them., URLs, Add links to your website, blog, or social media profiles., https://shadcn.com, http://twitter.com/shadcn, Add URL, Update profile",
"font_style": "Clean, sans-serif font. Likely a common system font or a popular web font like Inter or similar. Different weights and sizes are used for headings, labels, and body text to create hierarchy.",
"position": "Text is strategically placed: main title at the top left, navigation items vertically on the left, form labels above or beside input fields, and descriptive text below relevant sections or fields."
},
"symbolism": {
"concept": "User control and personalization.",
"representation": "The various input fields, dropdowns, and save buttons empower the user to customize their public profile and manage their account preferences. The structured layout symbolizes order and ease of use."
},
"rendering_details": {
"textures": "Smooth, matte surfaces for all UI elements. No complex textures.",
"effects": "Subtle drop shadows on the 'Update profile' button and the active 'Profile' navigation item to create a slight sense of depth and interactivity. Rounded corners on input fields, buttons, and the active navigation item for a softer, modern feel."
}
}根据 JSON Schema 生成 UI 图对应的代码
得到 JSON Schema 后，我们根据业务需求对 JSON Schema 进行实际调整，然后就可以对 JSON Schema 进行反向工程，生成 UI 图对应的代码。可以参考下面的提示词：
You are a professional ui designer and frontend developer.
You are given a **JSON schema** that describes the visual style of a UI.
Your task is to generate the code that implements the UI based on the JSON schema.
The code should be implemented in React, Next.js, Tailwind CSS, Shadcn UI, lucide-react and other modern frontend libraries.
**JSON Schema**:
'''json
{
"scene": "A user interface (UI) screen for managing account settings and profile information within a web application.",
"subjects": [
{
"type": "UI Element - Navigation Menu",
"description": "A vertical navigation menu on the left side with items like 'Profile', 'Account', 'Appearance', 'Notifications', and 'Display'. 'Profile' is highlighted, indicating it's the active section.",
"position": "Left column, occupying roughly the top half of the visible left section."
},
{
"type": "UI Element - Form",
"description": "The main content area displays a form for editing the 'Profile'. It includes fields for 'Username', 'Email', 'Bio', and 'URLs'. Input fields, dropdowns, and buttons are present.",
"position": "Right column, occupying the majority of the screen space."
},
{
"type": "UI Element - Text Content",
"description": "Various text elements including section titles ('Settings', 'Profile'), field labels ('Username', 'Email', 'Bio', 'URLs'), placeholder text, instructional text, and button labels ('Add URL', 'Update profile').",
"position": "Distributed throughout the UI, associated with their respective elements."
}
],
"style": "Minimalist, clean, modern web UI design.",
"color_palette": [
"#FFFFFF",
"#F3F4F6",
"#111827",
"#6B7280",
"#4B5563"
],
"lighting": "Flat, even, shadowless lighting typical of digital interfaces. Subtle drop shadows are used for depth on the active navigation item and buttons.",
"mood": "Functional, organized, professional, user-friendly.",
"composition": "Two-column layout. The navigation menu is on the left, and the main content area (profile settings form) is on the right. Elements are aligned on a grid, with clear visual hierarchy.",
"camera": {
"angle": "Straight-on, eye-level (as if viewing a screen directly).",
"distance": "Medium shot, showing the entire relevant section of the settings page.",
"lens": "Orthographic projection (typical for UI design, no perspective distortion)."
},
"typography": {
"text": "Settings, Manage your account settings and set e-mail preferences., Profile, Account, Appearance, Notifications, Display, Profile, This is how others will see you on the site., Username, shadcn, This is your public display name. It can be your real name or a pseudonym. You can only change this once every 30 days., Email, Select a verified email to display, You can manage verified email addresses in your email settings., Bio, I own a computer., You can @mention other users and organizations to link to them., URLs, Add links to your website, blog, or social media profiles., https://shadcn.com, http://twitter.com/shadcn, Add URL, Update profile",
"font_style": "Clean, sans-serif font. Likely a common system font or a popular web font like Inter or similar. Different weights and sizes are used for headings, labels, and body text to create hierarchy.",
"position": "Text is strategically placed: main title at the top left, navigation items vertically on the left, form labels above or beside input fields, and descriptive text below relevant sections or fields."
},
"symbolism": {
"concept": "User control and personalization.",
"representation": "The various input fields, dropdowns, and save buttons empower the user to customize their public profile and manage their account preferences. The structured layout symbolizes order and ease of use."
},
"rendering_details": {
"textures": "Smooth, matte surfaces for all UI elements. No complex textures.",
"effects": "Subtle drop shadows on the 'Update profile' button and the active 'Profile' navigation item to create a slight sense of depth and interactivity. Rounded corners on input fields, buttons, and the active navigation item for a softer, modern feel."
}
}
'''