site-specification

Name: site-specification
Author: cline

github.com/cline设计与 UI402.2k 次安装15 周前更新

代码仓库

关于 site-specification

此 Skill 将用户描述及提供的材料整理为网站规格，用于指导主题生成。它提取品牌、受众、目标、布局和字体线索，并按格式呈现结果供确认。

主要功能

01从描述提取网站信息
02分析图片和文档
03按网站类型推断目标与受众
04生成 JSON 网站规格
05整理结果供用户确认

适用场景

01生成网站主题前准备设计简报
02从标志或文档识别品牌线索
03将简短需求整理成初步规格

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/cline/skills --skill site-specification

安装后在 Claude Code 中输入/site-specification确认已加载。

详细介绍

网站规格技能

从用户描述中提取详细的网站规格，为主题生成提供指导。如果用户提供了图片、图片 URL 或其他文档，请分析其中的线索，进一步了解品牌和设计偏好——显然，现有的 Logo 图片等内容可以充分体现品牌的美学风格、语气和价值观，书面文档也可能包含有关品牌形象或设计偏好的明确说明。

网站规格架构

完整的网站规格使用以下 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"
  }
}

所有字段均为可选项——仅包含能够根据用户描述合理推断的内容。

不同网站类型的推断模式

SaaS / 技术

推断：

主要目标：推动用户注册或提交演示请求
受众：技术决策者、开发者或业务用户
语气：专业、创新、值得信赖
品牌关键词：现代、高效、强大、无缝

典型布局：

展示价值主张和 CTA 的首屏
功能网格或对比内容
社会认同（Logo、客户评价）
定价版块
常见问题
最终 CTA

字体倾向：

简洁的几何无衬线字体
层次分明，便于快速浏览
可考虑：Satoshi、Plus Jakarta Sans、Outfit

电子商务 / 零售

推断：

主要目标：推动购买
受众：有特定兴趣的消费者
语气：因品牌而异（奢华、休闲或实惠）
品牌关键词：取决于品牌定位

典型布局：

展示主打产品或促销活动的首屏
品类导航
主打产品网格
信任信号（评价、保障）
新闻通讯订阅

字体倾向：

与品牌定位相匹配
奢华：精致的衬线字体
现代：几何无衬线字体
活泼：展示字体

专业服务（法律、金融、咨询）

推断：

主要目标：获取咨询或树立信誉
受众：企业决策者、寻求专业服务的个人
语气：专业、权威、值得信赖
品牌关键词：专业能力、诚信、资深、可靠

典型布局：

展示资质或价值陈述的首屏
服务 / 执业领域
团队介绍
案例研究或成果
客户评价
联系 / 咨询 CTA

字体倾向：

标题使用传统衬线字体（增强可信度）
正文使用简洁的无衬线字体（易于阅读）
可考虑：Cormorant Garamond、DM Serif Display、Source Sans Pro

餐厅 / 餐饮服务

推断：

主要目标：吸引顾客预订或到店
受众：本地食客、美食爱好者
语气：温暖、亲切、诱人
品牌关键词：新鲜、手工制作、舒适、地道

典型布局：

展示诱人美食图片的首屏
菜单版块
关于 / 品牌故事
地址和营业时间
预订 CTA
Instagram 或图片集

字体倾向：

使用展示字体体现个性
菜单使用易读的衬线或无衬线字体
可考虑：Playfair Display、Lora、Josefin Sans

创意 / 作品集

推断：

主要目标：展示作品并吸引客户
受众：潜在客户、艺术总监、合作者
语气：富有创意、个性鲜明、彰显个性
品牌关键词：原创、匠心、艺术、独特

典型布局：

全幅作品集首屏
项目画廊或案例研究
关于 / 个人简介版块
提供的服务
联系方式或咨询表单

字体倾向：

独特的展示字体
与创作者的风格相契合
可考虑：Clash Display、Fraunces、Syne

博客 / 媒体

推断：

首要目标：吸引读者并扩大受众
受众：具有特定兴趣的读者
语气：因细分领域而异（权威、轻松、有趣）
品牌关键词：信息丰富、引人入胜、可信

典型布局：

特色文章主视觉
最新文章网格或列表
分类导航
作者简介
订阅电子报
热门 / 趋势内容版块

字体倾向：

易读的正文字体（对长篇内容至关重要）
简洁的标题字体
可考虑：Merriweather、Source Serif Pro、DM Sans

非营利组织 / 机构

推断：

首要目标：推动捐赠、志愿服务或提高公众意识
受众：支持者、潜在捐赠者、社区成员
语气：富有同情心、急迫、值得信赖
品牌关键词：影响、社区、改变、希望

典型布局：

包含使命宣言和行动号召的主视觉
影响力统计数据
项目 / 倡议
影响故事
帮助方式（捐赠、志愿服务）
电子报 / 最新动态订阅

字体倾向：

温暖、亲切的字体
避免冷冰冰的企业风格
可考虑：Lato、Open Sans、PT Serif

示例

示例 1：咖啡店

用户提示词：“为我的咖啡店 Bean & Brew 创建一个主题”

{
  "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"
  }
}

示例 2：律师事务所

用户提示词：“我需要为我的律师事务所 Harrison & Associates 设计一个主题。我们专攻公司法和并购。整体感觉要非常专业、值得信赖。”

{
  "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"
  }
}

示例 3：电竞战队

用户提示词：“为 NeonPulse Gaming 制作一个主题——这是一支电竞战队。我们参加 FPS 游戏比赛，希望主题风格前卫、动感十足。”

{
  "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"
  }
}

示例 4：简短请求

用户提示词：“为我的博客创建一个自定义主题”

{
  "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"
  }
}

展示格式

将提取出的规格展示给用户确认。除非调用命令指定了其他展示格式，否则请使用以下表格格式：

字段	值
网站名称	[name]
网站类型	[type]
首要目标	[goal]
目标受众	[audience]
语气	[tone]
品牌关键词	[keywords]
主要版块	[comma-separated list from layoutNotes]
字体	[primaryFont] + [secondaryFont]

然后询问：“这符合你的设想吗？如果你希望在进入设计方案之前调整任何内容，请告诉我。”

支持 Markdown

登录后评论