同一个资源目录，在电脑上看着整齐，到了手机上却可能标题挤成一团、按钮越出卡片、页面必须左右拖动。让 AI“改成响应式”经常只能得到一个媒体查询，并不能保证真实长标题和真实链接都能使用。
这篇是 Frontend Design Skill 的专项练习：为一个虚构的社区学习资料目录制作可在窄屏阅读的卡片布局。与泛泛设计首页不同，这次只解决内容重排、长文字换行和键盘访问三个问题。成果是一个独立 HTML 文件、一份设计简报与一份尺寸验收记录；不需要服务器，也不包含账户、支付或资料上传。
一、这个 Skill 在本任务中负责什么
Frontend Design 是 Anthropic 官方示例仓库中的界面设计指导 Skill。当前文件强调根据主题确定视觉方向、先计划再构建，并检查响应式布局、键盘焦点等基础质量。它通过指导宿主助手工作发挥作用，不会自行变成浏览器、页面生成服务器或自动检测工具。
本例把它用于“设计简报到界面实现”的阶段。浏览器能否运行、文件能否保存、测试能否执行，取决于宿主实际提供的能力。即使成功加载 Skill，最终页面仍需验收，不能把加载成功当作设计通过。
文中的 HTML 是本站编写的教学参考，实际尺寸与键盘结果在后文说明；不冒充某次模型原样输出，不承诺使用任意模型都能复现相同视觉效果。图示也都是原创示意，不是产品后台截图。
二、准备目录、版本与宿主
从文章资料表里的官方项目确认来源，也可以下载本站已提供的 Frontend Design 源码包。该下载沿用已经核验的同一份包，不是本教程推出的新版本。解压后应保留 frontend-design 文件夹中的 SKILL.md 和 LICENSE.txt，以及包附带的上游说明。
先阅读文件，再按宿主官方方式加载。以官方 README 当前介绍的 Claude Code 插件方式为例，在其命令界面添加示例市场，然后安装示例插件集合：
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills安装后检查插件列表和技能名称，在任务中明确提到 frontend-design。这两行是 Claude Code 的插件命令，不是普通 PowerShell 命令；其他工具需要核对自己的 Skill 目录和兼容方式，不能照搬名称就认为安装完成。
如果你只是要学习布局，也可以直接运行下文的独立示例，不必为了练习购买新订阅。使用助手时先检查账号权限和当前费用；本文不提供固定价格、免费额度或所有端一致的承诺。
三、先写设计简报，再让 AI 实现
给助手提供真实结构比一句“高级一点”更有用。本次使用三份虚构学习资料：读书会讨论提纲、入门摄影练习和社区花园观察笔记。每份有标题、简介和一个指向本页说明区域的练习链接，不假装已经提供外部下载。
视觉方向围绕社区资料阅读设计：深蓝用于文字和操作，浅蓝灰作为页面底色，少量金色用于类别；主标题稍大，卡片标题清楚，正文保持舒适行距。这里不使用远程字体、背景照片或自动动画，便于把注意力集中在内容重排。
请使用 frontend-design 为社区学习资料制作静态目录。
先提出配色、字号层级与布局，再根据以下约束实现。
只写一个HTML，无构建工具、外部依赖和网络请求。
宽屏三列，窄屏自然变成一列；保留完整标题与简介。
用一条很长的英文资源名和中文长标题测试，不能整页横向滚动。
每张卡片只有一个清楚的详情链接，键盘焦点必须可见。
不使用固定卡片高度，不把超出内容隐藏来掩盖布局问题。
不要新增登录、付费、搜索或虚假的下载功能。
完成后说明哪些检查已经实际执行，哪些仍待人工验收。让助手先说明为什么选这些颜色和布局，再检查方案是否符合阅读任务。若它添加大面积装饰、无用途编号或过多悬浮效果，先删减与查找资料无关的部分，再进入实现。这样修改对象明确，不会每次重做整页。
四、保存一个可运行的参考页面
新建 reflow-cards.html，使用 UTF-8 保存以下完整代码，双击在现代浏览器打开。三个“阅读说明”都定位到本页的交付说明，属于练习导航，不是网盘链接。
<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>社区学习资料目录</title>
<style>
*{box-sizing:border-box}
body{margin:0;background:#eef3f7;color:#18324d;font:18px/1.7 system-ui,sans-serif}
main{max-width:72rem;margin:auto;padding:clamp(1rem,4vw,3rem)}
h1{font-size:clamp(1.8rem,4vw,3rem);line-height:1.25;max-width:100%}
h2{font-size:1.35rem;line-height:1.4;margin:.6rem 0}
p{margin:.7rem 0}
.intro{max-width:40rem}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin:2rem 0}
article{min-width:0;background:white;border-top:5px solid #476d93;padding:1.4rem;display:flex;flex-direction:column;align-items:flex-start}
.kind{font-size:.9rem;background:#f4e7c9;padding:.15rem .5rem}
article h2,article p{overflow-wrap:anywhere}
article a{margin-top:auto;padding-top:1rem;display:inline-block;color:#174f86;text-underline-offset:.2em}
a:focus-visible{outline:3px solid #174f86;outline-offset:5px}
#notes{border-top:1px solid #9bb0c3;padding-top:1rem;scroll-margin-top:1rem}
@media(max-width:54rem){.grid{grid-template-columns:1fr}}
</style>
<main>
<header>
<p>社区学习资料</p>
<h1>留一份资料，开始一次练习</h1>
<p class="intro">虚构目录示例：先看适用任务，再选择要阅读的说明。没有真实下载或报名功能。</p>
</header>
<section class="grid" aria-label="学习资料">
<article>
<span class="kind">阅读讨论</span>
<h2>读书会讨论提纲：从一个疑问开始，把观点与书中证据分开记录</h2>
<p>适合第一次组织小组讨论的人，包含阅读问题、证据位置和交流约定。</p>
<a href="#notes" aria-label="阅读读书会讨论提纲说明">阅读说明</a>
</article>
<article>
<span class="kind">摄影入门</span>
<h2>CommunityPhotographyPracticeWorkbookForBeginners</h2>
<p>用一个长英文资源名检查自动换行；练习内容包括光线观察与三张照片复盘。</p>
<a href="#notes" aria-label="阅读摄影练习说明">阅读说明</a>
</article>
<article>
<span class="kind">自然观察</span>
<h2>社区花园观察笔记</h2>
<p>先记录日期、天气与观察对象，再把事实和猜想分别写下。</p>
<a href="#notes" aria-label="阅读社区花园观察说明">阅读说明</a>
</article>
</section>
<section id="notes" tabindex="-1">
<h2>练习交付说明</h2>
<p>这是本地静态布局原型。链接只用于验证定位，资料尚未提供下载。真实上线应逐项替换成可访问的对应详情页。</p>
</section>
</main>
</html>五、看懂几个影响重排的关键点
网格使用 minmax 零到一份宽度，卡片允许最小宽度为零，避免长内容强行撑开列。长英文名通过 overflow-wrap 允许必要时换行；中文标题保留全文，不靠固定高度或单行省略掩盖信息。
当视口不超过五十四 rem，布局改为一列。这个断点来自本例的内容宽度需求，不是所有网站都应照抄的手机标准。真实目录卡片更多或标题更长时，可以重新选择断点，但要用内容验证，不只看设备名称。
卡片内部采用纵向布局，链接的自动上边距让宽屏操作位置更容易对齐。它不会强制所有简介同样长，也没有把每张卡片设成固定像素高度。文字增多时应允许页面变长，而不是把正文剪掉。
页面使用本机字体，减少额外依赖；不同系统的中文字体外观仍可能不同。若真实项目需要品牌字体，应核对授权、加载失败时的替代字体和实际换行，不能只在设计稿里看起来一致。
六、按尺寸检查，而不是只拖一下窗口
先在宽屏确认三张卡片呈三列，标题、简介和链接都完整。再把浏览器的设备模拟视口设为三百二十 CSS 像素宽，确认卡片为一列，长英文名可以换行，整页无需左右滚动才能阅读。
W3C 的 Reflow 说明讨论了垂直内容在等效三百二十 CSS 像素宽度下重排的目标及例外。本练习借这个宽度检查布局，但通过一个窄屏检查不等于通过全部 WCAG 要求，更不等于完成所有手机浏览器兼容测试。
不要把浏览器窗口外框宽度直接当作页面 CSS 宽度；侧栏、缩放和设备模拟可能改变实际可用区域。记录测试时写清视口宽度、浏览器和所检查的文件版本，才方便复查。
本站对本文参考代码实际检查了桌面三列布局、三个链接的 Tab 顺序与 Enter 定位，并在三百二十 CSS 像素宽的独立 iframe 中检查到三张卡片为一列、文档宽度没有超出该视口。这里是浏览器内的布局测试，不是手机真机、放大操作或读屏软件测试。
再进行键盘测试：用 Tab 依次到三个链接，焦点轮廓应该清楚可见，按 Enter 后能到交付说明区域。若视觉上写“阅读说明”，实际却打开空白页，就不算通过；正式项目还要逐个验证真实详情链接。
七、发现问题时怎样让 AI 修改
如果整页横向滚动，先定位最宽的元素，检查固定宽度、最小宽度、不可换行字符串和网格设置。把具体标题、实际视口以及问题截图交给助手，要求只修改造成溢出的规则，不要直接在 body 上加隐藏溢出来消除滚动条。
如果卡片看起来参差，先确认这是内容长度差异还是布局错误。阅读目录不一定要每个字块都齐头并进，完整信息比强行统一高度更重要。可以调整间距和布局，不应删除关键描述来满足整齐。
如果 Tab 看不到焦点，检查是否删除了默认 outline，或自定义颜色与背景太接近。如果链接名字都一样，保留可见文案简洁的同时提供具体可访问名称，让读屏用户能知道各链接分别对应哪份资料。
每次修改后重新跑一遍原来的长标题、长英文名和窄屏用例，再看有没有引入新问题。只看修好的那张卡片，容易漏掉其他卡片被相同 CSS 影响。
八、把设计练习整理成可维护交付
保留原始简报、选定的视觉方向、HTML 文件、尺寸截图和问题清单。测试记录区分已执行与建议执行；没有用读屏软件测试，就不要在报告里写读屏兼容；没有真机验证，就不要写全部手机正常。
后续增加资料时，沿用标题、简介、类别和详情链接四个字段，先用最长内容检查。需要图片时保持等比显示，并提供说明性替代文本；需要搜索或筛选时，另设功能范围与验收，不把纯布局样稿当作完整资源平台。
本例不制作新 Skill 包，也不更新旧包版本。资料表展示既有下载与明确版本，使用前仍应阅读包内说明和许可证。Frontend Design 的价值在于帮助建立明确设计判断，最终是否可用，要由具体内容、页面行为和实际验证共同决定。
还没有公开评论，欢迎分享你的想法。