请输入...
很好，这个技术栈非常适合做“棉麻质感”，因为 CSS Module 天然有“克制、局部、不过度侵入”的特性。下面我会给你一套可以直接拷进项目用的规范，并且完全贴合 React + CSS Modules 的工程实践。
一、项目级结构建议（React + CSS Modules）
src/
├─ styles/
│ ├─ tokens.css # 设计变量（颜色 / 字体 / 间距）
│ ├─ texture.module.css # 纹理 & 背景
│ └─ base.css # 全局基础样式
├─ components/
│ ├─ Card/
│ │ ├─ Card.jsx
│ │ └─ Card.module.css
│ ├─ Button/
│ │ ├─ Button.jsx
│ │ └─ Button.module.css
│ └─ Input/
└─ App.jsx
二、全局设计 Token（styles/tokens.css）
只在入口文件引入一次
:root {
/* Background */
--bg-main: #f7f5f1;
--bg-sub: #efece6;
--bg-deep: #e4dfd6;
/* Text */
--text-primary: #2f2e2b;
--text-secondary: #6b6862;
--text-muted: #9b978f;
/* Accent */
--accent-main: #a38c6d;
--accent-hover: #8f7a5e;
/* Radius */
--radius-sm: 4px;
--radius-md: 6px;
/* Spacing */
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
/* Font */
--font-main: -apple-system, BlinkMacSystemFont,
"PingFang SC", "Noto Sans SC", sans-serif;
}
在 main.jsx / index.jsx：
import "./styles/tokens.css";
import "./styles/base.css";
三、全局基础样式（styles/base.css）
html, body {
margin: 0;
padding: 0;
background-color: var(--bg-main);
font-family: var(--font-main);
color: var(--text-primary);
}
* {
box-sizing: border-box;
}
p {
line-height: 1.8;
}
四、棉麻纹理模块（styles/texture.module.css）
.linen {
background:
linear-gradient(
0deg,
rgba(255,255,255,0.02),
rgba(0,0,0,0.02)
),
var(--bg-main);
}
使用方式（React）：
import texture from "@/styles/texture.module.css";
export function Page({ children }) {
return (
<div className={texture.linen}>
{children}
</div>
);
}
五、核心组件示例
1️⃣ Card 组件
Card.jsx
import styles from "./Card.module.css";
export function Card({ children }) {
return <div className={styles.card}>{children}</div>;
}
Card.module.css
.card {
background-color: var(--bg-sub);
border-radius: var(--radius-md);
padding: var(--space-lg);
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
2️⃣ Button 组件
Button.jsx
import styles from "./Button.module.css";
export function Button({ children, ...props }) {
return (
<button className={styles.button} {...props}>
{children}
</button>
);
}
Button.module.css
.button {
background-color: var(--accent-main);
color: #fff;
border: none;
border-radius: var(--radius-sm);
padding: 8px 18px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.25s ease;
}
.button:hover {
background-color: var(--accent-hover);
}
3️⃣ Input 组件
.input {
background-color: var(--bg-main);
border: 1px solid #d8d3c9;
border-radius: var(--radius-sm);
padding: 8px 10px;
color: var(--text-primary);
}
.input:focus {
outline: none;
border-color: var(--accent-main);
}
六、页面级示例（React）
import { Card } from "@/components/Card/Card";
import { Button } from "@/components/Button/Button";
export default function Home() {
return (
<div style={{ padding: 40 }}>
<Card>
<h2>棉麻质感示例</h2>
<p>
这是一个偏自然、克制、非工业化的界面示例。
</p>
<Button>确认</Button>
</Card>
</div>
);
}
七、和产品经理对齐用语（非常实用）
你可以这样总结给他听：
我这边会用低饱和暖色、轻微纹理、克制阴影和舒缓排版，整体避免科技感和强对比，页面会更像生活方式类产品，而不是工具型后台。
如果他点头，说明你们对“棉麻”已经对齐了。
八、进阶建议（开发者向）
- 把 tokens.css 当作唯一允许调风格的入口
- 禁止组件内写具体色值（Code Review 规则）
- 后期可直接换一套 token 做主题切换
如果你愿意，下一步我可以：
- 给你一份 Lint 级别的“禁止非 token 色值”约定
- 或帮你 把这套规范映射成 Tailwind 配置
- 或做一版 移动端专用的棉麻规范
你现在这个项目更偏 内容型 / 工具型 / 后台？我可以针对性再收紧一版。