skill-webdesign

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Web Designer Skill

网页设计师技能指南

Expert guidance for creating responsive, maintainable websites with sharp attention to design details.

为创建响应式、可维护的网站提供专业指导，注重设计细节。

Core Principles

核心原则

Design Consistency

设计一致性

Load project styleguide first—check
```
references/styleguide.md
```
or project's design tokens
Use semantic color names (
```
--color-navy
```
) not raw values (
```
#1E3A5F
```
)
Maintain typography hierarchy: one display size per page, consistent heading progression
Spacing: use design tokens (
```
section-gap
```
,
```
card-padding
```
) not arbitrary values

首先加载项目样式指南——查看
```
references/styleguide.md
```
或项目的设计令牌
使用语义化颜色名称（如
```
--color-navy
```
）而非原始色值（如
```
#1E3A5F
```
）
保持排版层级：每页使用一种展示字号，标题层级连贯统一
间距：使用设计令牌（如
```
section-gap
```
、
```
card-padding
```
）而非任意数值

Mobile-First Responsive

移动优先的响应式设计

Start with mobile layout, progressively enhance for larger screens
Breakpoints:
```
sm:640px
```
,
```
md:768px
```
,
```
lg:1024px
```
,
```
xl:1280px
```
Touch targets: minimum 44x44px for interactive elements
Test: content readable without horizontal scroll at 320px width

从移动端布局开始，逐步为更大屏幕做增强优化
断点：
```
sm:640px
```
,
```
md:768px
```
,
```
lg:1024px
```
,
```
xl:1280px
```
触摸目标：交互元素最小尺寸为44x44像素
测试：在320px宽度下内容可正常阅读，无横向滚动

Accessibility Non-Negotiables

无障碍设计硬性要求

Color contrast: 4.5:1 for body text, 3:1 for large text
Focus states: visible on all interactive elements
Semantic HTML: proper heading hierarchy, landmarks, form labels
Images: meaningful alt text or
```
aria-hidden
```
for decorative

颜色对比度：正文字符对比度≥4.5:1，大字号文本≥3:1
焦点状态：所有交互元素的焦点状态可见
语义化HTML：合理的标题层级、地标元素、表单标签
图片：装饰性图片需添加有意义的alt文本或设置
```
aria-hidden
```

Tech Stack: Astro + Tailwind + Cloudflare

技术栈：Astro + Tailwind + Cloudflare

Project Structure

项目结构

src/
├── components/
│   └── ui/           # Reusable UI components
├── layouts/          # Page layouts (BaseLayout.astro)
├── pages/            # Routes - each .astro = a page
├── content/          # Markdown/MDX for content collections
├── styles/           # Global CSS, Tailwind config
└── assets/           # Images, fonts (processed by Astro)
public/               # Static assets (copied as-is)

src/
├── components/
│   └── ui/           # 可复用UI组件
├── layouts/          # 页面布局（BaseLayout.astro）
├── pages/            # 路由 - 每个.astro文件对应一个页面
├── content/          # Markdown/MDX内容集合
├── styles/           # 全局CSS、Tailwind配置
└── assets/           # 图片、字体（由Astro处理）
public/               # 静态资源（原样复制）

Component Patterns

组件模式

Astro Components - Use for static or lightly interactive UI:

astro

---
interface Props {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
}
const { variant = 'primary', size = 'md' } = Astro.props;
---
<button class:list={['btn', `btn-${variant}`, `btn-${size}`]}>
  <slot />
</button>

Content Collections - For blog posts, reports, case studies:

typescript

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const posts = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    date: z.date(),
    featured: z.boolean().default(false),
    tags: z.array(z.string()).optional(),
  }),
});

export const collections = { posts };

Astro 组件 - 用于静态或轻交互UI：

astro

---
interface Props {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
}
const { variant = 'primary', size = 'md' } = Astro.props;
---
<button class:list={['btn', `btn-${variant}`, `btn-${size}`]}>
  <slot />
</button>

内容集合 - 适用于博客文章、报告、案例研究：

typescript

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const posts = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    date: z.date(),
    featured: z.boolean().default(false),
    tags: z.array(z.string()).optional(),
  }),
});

export const collections = { posts };

Automation Patterns

自动化模式

No Hardcoding - Use Data-Driven Approaches:

astro

---
// ❌ Hardcoded featured posts
const featured = [{ title: "Post 1" }, { title: "Post 2" }];

// ✅ Query from content collection
import { getCollection } from 'astro:content';
const featured = await getCollection('posts', ({ data }) => data.featured);
---

Dynamic Dates:

astro

---
// ❌ Hardcoded year
const year = "2024";

// ✅ Dynamic
const year = new Date().getFullYear();
---
<footer>© {year} Company Name</footer>

Environment-Based Config:

typescript

// astro.config.mjs
export default defineConfig({
  site: import.meta.env.PROD 
    ? 'https://example.com' 
    : 'http://localhost:4321',
});

避免硬编码 - 采用数据驱动方式：

astro

---
// ❌ 硬编码推荐文章
const featured = [{ title: "Post 1" }, { title: "Post 2" }];

// ✅ 从内容集合查询
import { getCollection } from 'astro:content';
const featured = await getCollection('posts', ({ data }) => data.featured);
---

动态日期：

astro

---
// ❌ 硬编码年份
const year = "2024";

// ✅ 动态获取
const year = new Date().getFullYear();
---
<footer>© {year} Company Name</footer>

基于环境的配置：

typescript

// astro.config.mjs
export default defineConfig({
  site: import.meta.env.PROD 
    ? 'https://example.com' 
    : 'http://localhost:4321',
});

Landing Page Structure

着陆页结构

Essential Sections

核心板块

Hero - Clear value proposition, single primary CTA
Social Proof - Logos, testimonials, metrics
Features/Benefits - 3-4 key points with icons
How It Works - Simple 3-step process
CTA Section - Reinforce action before footer
Footer - Navigation, legal links, copyright

Hero区 - 清晰的价值主张，单一主要CTA
社交证明区 - 品牌标识、客户证言、数据指标
功能/优势区 - 3-4个带图标的核心要点
工作流程区 - 简单的3步流程说明
CTA板块 - 页脚前再次强化行动号召
页脚 - 导航、法律链接、版权信息

SEO Checklist

SEO检查清单

Unique
```
<title>
```
(50-60 chars) and
```
<meta name="description">
```
(150-160 chars)
Open Graph tags for social sharing
Canonical URL set
Structured data (JSON-LD) for organization/product
Sitemap.xml generated
robots.txt configured

唯一的
```
<title>
```
（50-60字符）和
```
<meta name="description">
```
（150-160字符）
用于社交分享的Open Graph标签
设置规范URL
为组织/产品添加结构化数据（JSON-LD）
生成sitemap.xml
配置robots.txt

Performance Targets

性能指标

Lighthouse Performance: >90
First Contentful Paint: <1.5s
Cumulative Layout Shift: <0.1
Use
```
loading="lazy"
```
on below-fold images
Prefer
```
<picture>
```
with WebP + fallback

Lighthouse性能评分：>90
首次内容绘制：<1.5秒
累积布局偏移：<0.1
对折叠区域以下的图片使用
```
loading="lazy"
```
优先使用
```
<picture>
```
标签，搭配WebP格式及降级方案

Workflow

工作流程

Before starting: Load
```
references/styleguide.md
```
if project has design system
Component creation: Check existing UI components before creating new
Styling: Use existing design tokens; propose additions to styleguide if needed
Content: Use content collections for repeated content types
Testing: Verify mobile layout, accessibility, performance

开始前：如果项目有设计系统，加载
```
references/styleguide.md
```
组件创建：创建新组件前先检查现有UI组件
样式设计：使用现有设计令牌；如有需要，提议向样式指南添加新令牌
内容处理：对重复类型的内容使用内容集合
测试：验证移动端布局、无障碍性和性能

References

参考资料

```
references/styleguide.md
```
- Fund Investigator design system (colors, typography, components)
```
references/astro-patterns.md
```
- Common Astro patterns and gotchas

```
references/styleguide.md
```
- Fund Investigator设计系统（颜色、排版、组件）
```
references/astro-patterns.md
```
- 常见Astro模式及注意事项