site-specification

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Site Specification Skill

Site Specification Skill

Extract detailed site specifications from user descriptions to guide theme generation. If the user has provided images, image urls or other documents, analyze them for additional clues about the brand and design preferences - obviously things like an exising logo image can be very informative about the brand's aesthetic, tone, and values, and any written documents can contain explicit statements about the brand identity or design preferences.
从用户描述中提取详细的网站规格,以指导主题生成。如果用户提供了图片、图片URL或其他文档,请分析这些内容以获取有关品牌和设计偏好的额外线索——显然,现有logo图片等内容可以很好地反映品牌的审美、风格基调和价值观,任何书面文档都可能包含关于品牌标识或设计偏好的明确说明。

Site Spec Schema

Site Spec Schema

A complete site specification uses this JSON structure:
json
{
  "siteBrief": {
    "siteName": "Name of the site/business",
    "siteType": "Type of site (e.g., e-commerce, portfolio, blog, SaaS, restaurant)",
    "primaryGoal": "Main purpose or conversion goal of the site",
    "audience": "Target audience description",
    "tone": "Voice and tone for the content",
    "brandKeywords": "Keywords describing the brand aesthetic and values"
  },
  "layoutNotes": [
    "Each layout requirement as a separate string",
    "Sections, features, and visual elements"
  ],
  "typography": {
    "primaryFont": "Main font for headings",
    "secondaryFont": "Font for body text",
    "usage": "How fonts should be applied",
    "fontImport": "Google Fonts import URL"
  }
}
All fields are optional - only include what can be reasonably inferred from the user's description.
完整的网站规格采用以下JSON结构:
json
{
  "siteBrief": {
    "siteName": "Name of the site/business",
    "siteType": "Type of site (e.g., e-commerce, portfolio, blog, SaaS, restaurant)",
    "primaryGoal": "Main purpose or conversion goal of the site",
    "audience": "Target audience description",
    "tone": "Voice and tone for the content",
    "brandKeywords": "Keywords describing the brand aesthetic and values"
  },
  "layoutNotes": [
    "Each layout requirement as a separate string",
    "Sections, features, and visual elements"
  ],
  "typography": {
    "primaryFont": "Main font for headings",
    "secondaryFont": "Font for body text",
    "usage": "How fonts should be applied",
    "fontImport": "Google Fonts import URL"
  }
}
所有字段都是可选的——仅包含可以从用户描述中合理推断出的内容。

Inference Patterns by Site Type

Inference Patterns by Site Type

SaaS / Technology

SaaS / Technology

Infer:
  • Primary goal: Drive signups or demo requests
  • Audience: Technical decision-makers, developers, or business users
  • Tone: Professional, innovative, trustworthy
  • Brand keywords: Modern, efficient, powerful, seamless
Typical layout:
  • Hero with value proposition and CTA
  • Feature grid or comparison
  • Social proof (logos, testimonials)
  • Pricing section
  • FAQ
  • Final CTA
Typography tendency:
  • Clean geometric sans-serifs
  • Strong hierarchy for scanning
  • Consider: Satoshi, Plus Jakarta Sans, Outfit
推断要点:
  • 核心目标:推动注册或演示请求
  • 受众:技术决策者、开发者或企业用户
  • 风格基调:专业、创新、值得信赖
  • 品牌关键词:现代、高效、强大、流畅
典型布局:
  • 包含价值主张和CTA的Hero区域
  • 功能网格或对比板块
  • 社交证明(品牌logo、客户评价)
  • 定价板块
  • FAQ板块
  • 最终CTA区域
排版倾向:
  • 简洁的几何无衬线字体
  • 清晰的层级结构便于快速浏览
  • 推荐字体:Satoshi、Plus Jakarta Sans、Outfit

E-commerce / Retail

E-commerce / Retail

Infer:
  • Primary goal: Drive purchases
  • Audience: Consumers with specific interests
  • Tone: Varies by brand (luxury vs. casual vs. value)
  • Brand keywords: Depends on positioning
Typical layout:
  • Hero with featured products or promotion
  • Category navigation
  • Featured products grid
  • Trust signals (reviews, guarantees)
  • Newsletter signup
Typography tendency:
  • Match to brand positioning
  • Luxury: refined serifs
  • Modern: geometric sans
  • Playful: display fonts
推断要点:
  • 核心目标:推动购买转化
  • 受众:有特定兴趣的消费者
  • 风格基调:因品牌定位而异(奢华风 vs 休闲风 vs 性价比风)
  • 品牌关键词:取决于品牌定位
典型布局:
  • 展示主打产品或促销活动的Hero区域
  • 品类导航
  • 主打产品网格
  • 信任标识(用户评价、售后保障)
  • 邮件订阅板块
排版倾向:
  • 匹配品牌定位
  • 奢华风:精致的衬线字体
  • 现代风:几何无衬线字体
  • 活泼风:展示性字体

Professional Services (Law, Finance, Consulting)

Professional Services (Law, Finance, Consulting)

Infer:
  • Primary goal: Generate inquiries or establish credibility
  • Audience: Business decision-makers, individuals seeking expertise
  • Tone: Professional, authoritative, trustworthy
  • Brand keywords: Expertise, integrity, established, reliable
Typical layout:
  • Hero with credentials or value statement
  • Services/practice areas
  • Team profiles
  • Case studies or results
  • Testimonials from clients
  • Contact/consultation CTA
Typography tendency:
  • Traditional serifs for headings (credibility)
  • Clean sans-serif for body (readability)
  • Consider: Cormorant Garamond, DM Serif Display, Source Sans Pro
推断要点:
  • 核心目标:获取咨询请求或建立可信度
  • 受众:企业决策者、寻求专业服务的个人
  • 风格基调:专业、权威、值得信赖
  • 品牌关键词:专业、诚信、资深、可靠
典型布局:
  • 展示资质或价值主张的Hero区域
  • 服务/业务领域板块
  • 团队成员简介
  • 案例研究或成果展示
  • 客户评价
  • 联系/咨询CTA区域
排版倾向:
  • 标题使用传统衬线字体(增强可信度)
  • 正文使用简洁无衬线字体(提升可读性)
  • 推荐字体:Cormorant Garamond、DM Serif Display、Source Sans Pro

Restaurant / Food Service

Restaurant / Food Service

Infer:
  • Primary goal: Drive reservations or visits
  • Audience: Local diners, food enthusiasts
  • Tone: Warm, inviting, appetite-inducing
  • Brand keywords: Fresh, handcrafted, cozy, authentic
Typical layout:
  • Hero with appetizing food imagery
  • Menu sections
  • About/story
  • Location and hours
  • Reservation CTA
  • Instagram or gallery
Typography tendency:
  • Display fonts for personality
  • Readable serif or sans for menus
  • Consider: Playfair Display, Lora, Josefin Sans
推断要点:
  • 核心目标:推动预订到店
  • 受众:本地食客、美食爱好者
  • 风格基调:温暖、有吸引力、激发食欲
  • 品牌关键词:新鲜、手工制作、温馨、正宗
典型布局:
  • 展示诱人美食图片的Hero区域
  • 菜单板块
  • 品牌故事/介绍
  • 门店位置与营业时间
  • 预订CTA区域
  • Instagram或图片画廊
排版倾向:
  • 使用展示性字体凸显个性
  • 菜单使用易读的衬线或无衬线字体
  • 推荐字体:Playfair Display、Lora、Josefin Sans

Creative / Portfolio

Creative / Portfolio

Infer:
  • Primary goal: Showcase work and attract clients
  • Audience: Potential clients, art directors, collaborators
  • Tone: Creative, distinctive, personality-driven
  • Brand keywords: Original, crafted, artistic, unique
Typical layout:
  • Full-bleed portfolio hero
  • Project gallery or case studies
  • About/bio section
  • Services offered
  • Contact or inquiry form
Typography tendency:
  • Distinctive display fonts
  • Personal to the creator's style
  • Consider: Clash Display, Fraunces, Syne
推断要点:
  • 核心目标:展示作品并吸引客户
  • 受众:潜在客户、艺术总监、合作伙伴
  • 风格基调:创意、独特、彰显个性
  • 品牌关键词:原创、匠心、艺术感、独特
典型布局:
  • 全屏展示作品集的Hero区域
  • 项目画廊或案例研究
  • 个人简介/品牌故事板块
  • 服务内容展示
  • 联系或咨询表单
排版倾向:
  • 使用独特的展示性字体
  • 契合创作者的个人风格
  • 推荐字体:Clash Display、Fraunces、Syne

Blog / Media

Blog / Media

Infer:
  • Primary goal: Engage readers and build audience
  • Audience: Readers with specific interests
  • Tone: Varies by niche (authoritative, casual, entertaining)
  • Brand keywords: Informative, engaging, credible
Typical layout:
  • Featured post hero
  • Recent posts grid or list
  • Category navigation
  • About the author
  • Newsletter signup
  • Popular/trending section
Typography tendency:
  • Readable body fonts (critical for long-form)
  • Clean heading fonts
  • Consider: Merriweather, Source Serif Pro, DM Sans
推断要点:
  • 核心目标:吸引读者并打造受众群体
  • 受众:有特定兴趣的读者
  • 风格基调:因领域而异(权威、休闲、娱乐)
  • 品牌关键词:信息丰富、引人入胜、可信
典型布局:
  • 展示精选文章的Hero区域
  • 最新文章网格或列表
  • 品类导航
  • 作者简介
  • 邮件订阅板块
  • 热门/ trending板块
排版倾向:
  • 正文使用易读字体(长文阅读至关重要)
  • 标题使用简洁字体
  • 推荐字体:Merriweather、Source Serif Pro、DM Sans

Non-profit / Organization

Non-profit / Organization

Infer:
  • Primary goal: Drive donations, volunteers, or awareness
  • Audience: Supporters, potential donors, community members
  • Tone: Compassionate, urgent, trustworthy
  • Brand keywords: Impact, community, change, hope
Typical layout:
  • Hero with mission statement and CTA
  • Impact statistics
  • Programs/initiatives
  • Stories of impact
  • Ways to help (donate, volunteer)
  • Newsletter/updates signup
Typography tendency:
  • Warm, approachable fonts
  • Avoid cold corporate feel
  • Consider: Lato, Open Sans, PT Serif
推断要点:
  • 核心目标:推动捐赠、招募志愿者或提升关注度
  • 受众:支持者、潜在捐赠者、社区成员
  • 风格基调:富有同情心、紧迫感、值得信赖
  • 品牌关键词:影响力、社区、变革、希望
典型布局:
  • 展示使命宣言和CTA的Hero区域
  • 影响力数据统计
  • 项目/举措展示
  • 影响力故事
  • 参与方式(捐赠、志愿者)
  • 邮件/更新订阅板块
排版倾向:
  • 使用温暖、亲切的字体
  • 避免冰冷的企业风格
  • 推荐字体:Lato、Open Sans、PT Serif

Examples

Examples

Example 1: Coffee Shop

Example 1: Coffee Shop

User prompt: "Create a theme for my coffee shop called Bean & Brew"
json
{
  "siteBrief": {
    "siteName": "Bean & Brew",
    "siteType": "coffee shop",
    "primaryGoal": "Attract local customers and showcase menu",
    "audience": "Coffee enthusiasts, local community members, remote workers looking for a cozy workspace",
    "tone": "warm, inviting, artisanal, community-focused",
    "brandKeywords": "cozy, handcrafted, aromatic, rustic wood, warm browns, cream accents"
  },
  "layoutNotes": [
    "Hero with inviting coffee shop interior or signature drink",
    "Menu section with categories (espresso, specialty drinks, pastries)",
    "About section with story and values",
    "Location and hours with embedded map",
    "Instagram feed integration",
    "Warm color palette (browns, creams, coffee tones)"
  ],
  "typography": {
    "primaryFont": "\"Playfair Display\", serif",
    "secondaryFont": "\"Lato\", sans-serif",
    "usage": "Playfair Display for elegant headings, Lato for readable body text",
    "fontImport": "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap"
  }
}
用户提示: "Create a theme for my coffee shop called Bean & Brew"
json
{
  "siteBrief": {
    "siteName": "Bean & Brew",
    "siteType": "coffee shop",
    "primaryGoal": "Attract local customers and showcase menu",
    "audience": "Coffee enthusiasts, local community members, remote workers looking for a cozy workspace",
    "tone": "warm, inviting, artisanal, community-focused",
    "brandKeywords": "cozy, handcrafted, aromatic, rustic wood, warm browns, cream accents"
  },
  "layoutNotes": [
    "Hero with inviting coffee shop interior or signature drink",
    "Menu section with categories (espresso, specialty drinks, pastries)",
    "About section with story and values",
    "Location and hours with embedded map",
    "Instagram feed integration",
    "Warm color palette (browns, creams, coffee tones)"
  ],
  "typography": {
    "primaryFont": "\"Playfair Display\", serif",
    "secondaryFont": "\"Lato\", sans-serif",
    "usage": "Playfair Display for elegant headings, Lato for readable body text",
    "fontImport": "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap"
  }
}

Example 2: Law Firm

Example 2: Law Firm

User prompt: "I need a theme for my law firm, Harrison & Associates. We specialize in corporate law and mergers. Very professional, trustworthy vibe."
json
{
  "siteBrief": {
    "siteName": "Harrison & Associates",
    "siteType": "law firm",
    "primaryGoal": "Establish credibility and generate client inquiries for corporate law services",
    "audience": "Business executives, corporate decision-makers, companies seeking M&A legal counsel",
    "tone": "professional, authoritative, trustworthy, sophisticated",
    "brandKeywords": "corporate excellence, integrity, deep navy, gold accents, marble textures, clean lines"
  },
  "layoutNotes": [
    "Hero with professional office imagery or abstract corporate graphics",
    "Practice areas section highlighting corporate law and M&A expertise",
    "Attorney profiles with credentials and specializations",
    "Case studies or notable transactions (anonymized)",
    "Client testimonials from business leaders",
    "Contact section with consultation booking",
    "Color palette: navy blue, white, gold accents"
  ],
  "typography": {
    "primaryFont": "\"Cormorant Garamond\", serif",
    "secondaryFont": "\"Source Sans Pro\", sans-serif",
    "usage": "Cormorant Garamond for prestigious headings, Source Sans Pro for professional body text",
    "fontImport": "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Source+Sans+Pro:wght@300;400;600&display=swap"
  }
}
用户提示: "I need a theme for my law firm, Harrison & Associates. We specialize in corporate law and mergers. Very professional, trustworthy vibe."
json
{
  "siteBrief": {
    "siteName": "Harrison & Associates",
    "siteType": "law firm",
    "primaryGoal": "Establish credibility and generate client inquiries for corporate law services",
    "audience": "Business executives, corporate decision-makers, companies seeking M&A legal counsel",
    "tone": "professional, authoritative, trustworthy, sophisticated",
    "brandKeywords": "corporate excellence, integrity, deep navy, gold accents, marble textures, clean lines"
  },
  "layoutNotes": [
    "Hero with professional office imagery or abstract corporate graphics",
    "Practice areas section highlighting corporate law and M&A expertise",
    "Attorney profiles with credentials and specializations",
    "Case studies or notable transactions (anonymized)",
    "Client testimonials from business leaders",
    "Contact section with consultation booking",
    "Color palette: navy blue, white, gold accents"
  ],
  "typography": {
    "primaryFont": "\"Cormorant Garamond\", serif",
    "secondaryFont": "\"Source Sans Pro\", sans-serif",
    "usage": "Cormorant Garamond for prestigious headings, Source Sans Pro for professional body text",
    "fontImport": "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Source+Sans+Pro:wght@300;400;600&display=swap"
  }
}

Example 3: Esports Team

Example 3: Esports Team

User prompt: "Make a theme for NeonPulse Gaming - an esports team. We compete in FPS games and want something edgy and fast."
json
{
  "siteBrief": {
    "siteName": "NeonPulse Gaming",
    "siteType": "esports team",
    "primaryGoal": "Build fan community, attract sponsors, and recruit talented players",
    "audience": "Gaming enthusiasts, esports fans, potential sponsors, aspiring pro gamers",
    "tone": "edgy, high-energy, competitive, bold",
    "brandKeywords": "neon glow, cyberpunk, electric purple, hot pink, dark backgrounds, glitch effects, speed lines"
  },
  "layoutNotes": [
    "Hero with team action shots or dynamic gaming footage background",
    "Player roster with stats and social links",
    "Match schedule and live stream integration",
    "Tournament achievements and trophies",
    "Sponsor showcase",
    "Merchandise store link",
    "News/blog for team updates",
    "Dark theme with neon accents (purple, pink, cyan)"
  ],
  "typography": {
    "primaryFont": "\"Rajdhani\", sans-serif",
    "secondaryFont": "\"DM Sans\", sans-serif",
    "usage": "Rajdhani for aggressive tech headings, DM Sans for clean readable content",
    "fontImport": "https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=DM+Sans:wght@300;400;600&display=swap"
  }
}
用户提示: "Make a theme for NeonPulse Gaming - an esports team. We compete in FPS games and want something edgy and fast."
json
{
  "siteBrief": {
    "siteName": "NeonPulse Gaming",
    "siteType": "esports team",
    "primaryGoal": "Build fan community, attract sponsors, and recruit talented players",
    "audience": "Gaming enthusiasts, esports fans, potential sponsors, aspiring pro gamers",
    "tone": "edgy, high-energy, competitive, bold",
    "brandKeywords": "neon glow, cyberpunk, electric purple, hot pink, dark backgrounds, glitch effects, speed lines"
  },
  "layoutNotes": [
    "Hero with team action shots or dynamic gaming footage background",
    "Player roster with stats and social links",
    "Match schedule and live stream integration",
    "Tournament achievements and trophies",
    "Sponsor showcase",
    "Merchandise store link",
    "News/blog for team updates",
    "Dark theme with neon accents (purple, pink, cyan)"
  ],
  "typography": {
    "primaryFont": "\"Rajdhani\", sans-serif",
    "secondaryFont": "\"DM Sans\", sans-serif",
    "usage": "Rajdhani for aggressive tech headings, DM Sans for clean readable content",
    "fontImport": "https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=DM+Sans:wght@300;400;600&display=swap"
  }
}

Example 4: Minimal Request

Example 4: Minimal Request

User prompt: "Build a custom theme for my blog"
json
{
  "siteBrief": {
    "siteType": "personal blog",
    "primaryGoal": "Share content and build readership",
    "tone": "personal, approachable"
  },
  "layoutNotes": [
    "Hero with featured post or welcome message",
    "Recent posts grid or list",
    "About the author section",
    "Categories/tags navigation",
    "Newsletter signup"
  ],
  "typography": {
    "primaryFont": "\"Outfit\", sans-serif",
    "secondaryFont": "\"Merriweather\", serif",
    "usage": "Outfit for clean headings, Merriweather for comfortable long-form reading",
    "fontImport": "https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Merriweather:wght@300;400;700&display=swap"
  }
}
用户提示: "Build a custom theme for my blog"
json
{
  "siteBrief": {
    "siteType": "personal blog",
    "primaryGoal": "Share content and build readership",
    "tone": "personal, approachable"
  },
  "layoutNotes": [
    "Hero with featured post or welcome message",
    "Recent posts grid or list",
    "About the author section",
    "Categories/tags navigation",
    "Newsletter signup"
  ],
  "typography": {
    "primaryFont": "\"Outfit\", sans-serif",
    "secondaryFont": "\"Merriweather\", serif",
    "usage": "Outfit for clean headings, Merriweather for comfortable long-form reading",
    "fontImport": "https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Merriweather:wght@300;400;700&display=swap"
  }
}

Presentation Format

Presentation Format

Present the extracted spec to the user for confirmation. Use the table format below unless the calling command specifies a different presentation format:
FieldValue
Site Name[name]
Site Type[type]
Primary Goal[goal]
Target Audience[audience]
Tone[tone]
Brand Keywords[keywords]
Key Sections[comma-separated list from layoutNotes]
Typography[primaryFont] + [secondaryFont]
Then ask: "Does this capture your vision? Let me know if you'd like to adjust anything before we proceed to design options."
将提取的规格呈现给用户确认。除非调用命令指定了其他呈现格式,否则请使用以下表格格式:
FieldValue
Site Name[name]
Site Type[type]
Primary Goal[goal]
Target Audience[audience]
Tone[tone]
Brand Keywords[keywords]
Key Sections[comma-separated list from layoutNotes]
Typography[primaryFont] + [secondaryFont]
然后询问:“这是否符合你的设想?在我们进入设计选项之前,如果你有任何调整需求,请告诉我。”