Resume Modern

Name: Resume Modern
Author: nexu-io

nexu-io/open-design

1.7k installs
82k repo stars
Updated July 28, 2026
nexu-io/open-design

resume-modern is an agent skill that modern minimal resume, single a4 page, ready for print or pdf export.

About

resume-modern is an agent skill from nexu-io/open-design that modern minimal resume, single a4 page, ready for print or pdf export. 【模板: 现代极简简历】 - 容器宽度模拟 A4: `w-[210mm] min-h-[297mm] mx-auto`, 内边距 16-20mm。 - 顶部姓名巨大 (text-4xl), 底下一行 contact (邮箱 / 电话 / 城市 / GitHub / LinkedIn), 中间用细竖线分隔。 - 主体两栏可选: 左 60% 主线（经历/项目/教育）, 右 40% 副线（技能/语言/获奖）。 - 章节标题: small caps 风格, 上方一条短 accent 线 (w-8 h-0.5)。 - 经历每条: 公司 + 职位 + 时间区间 (右对齐), 下方 1-3 条 bullet 用动词开头。 - 不使用花哨颜色, 黑白灰 + 1 个 accent (深蓝 / 墨绿)。 - 添 Developers invoke resume-modern during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills.

容器宽度模拟 A4: `w-[210mm] min-h-[297mm] mx-auto`, 内边距 16-20mm。
顶部姓名巨大 (text-4xl), 底下一行 contact (邮箱 / 电话 / 城市 / GitHub / LinkedIn), 中间用细竖线分隔。
主体两栏可选: 左 60% 主线（经历/项目/教育）, 右 40% 副线（技能/语言/获奖）。
章节标题: small caps 风格, 上方一条短 accent 线 (w-8 h-0.5)。
经历每条: 公司 + 职位 + 时间区间 (右对齐), 下方 1-3 条 bullet 用动词开头。

Resume Modern by the numbers

1,689 all-time installs (skills.sh)
+128 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #202 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
Security screen: LOW risk (skills.sh audit)
Data as of Jul 28, 2026 (Skillselion catalog sync)

At a glance

resume-modern capabilities & compatibility

Capabilities: 容器宽度模拟 a4: `w [210mm] min h [297mm] mx auto`, 内边 · 顶部姓名巨大 (text 4xl), 底下一行 contact (邮箱 / 电话 / 城市 / · 主体两栏可选: 左 60% 主线（经历/项目/教育）, 右 40% 副线（技能/语言/获奖）。 · 章节标题: small caps 风格, 上方一条短 accent 线 (w 8 h 0.5)。 · 经历每条: 公司 + 职位 + 时间区间 (右对齐), 下方 1 3 条 bullet 用动词开
Use cases: orchestration

From the docs

What resume-modern says it does

- 容器宽度模拟 A4: `w-[210mm] min-h-[297mm] mx-auto`, 内边距 16-20mm。

SKILL.md

- 顶部姓名巨大 (text-4xl), 底下一行 contact (邮箱 / 电话 / 城市 / GitHub / LinkedIn), 中间用细竖线分隔。

SKILL.md

- 主体两栏可选: 左 60% 主线（经历/项目/教育）, 右 40% 副线（技能/语言/获奖）。

SKILL.md

npx skills add https://github.com/nexu-io/open-design --skill resume-modern

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/resume-modern.svg)](https://skillselion.com/skills/nexu-io/open-design/resume-modern)

Installs	1.7k
repo stars	★ 82k
Security audit	3 / 3 scanners passed
Last updated	July 28, 2026
Repository	nexu-io/open-design ↗

What it does

Modern minimal resume, single A4 page, ready for print or PDF export.

Who is it for?

Developers working on design & ui/ux during build tasks.

Skip if: Tasks outside Design & UI/UX scope described in SKILL.md.

When should I use this skill?

Modern minimal resume, single A4 page, ready for print or PDF export.

What you get

Completed design & ui/ux workflow aligned with SKILL.md steps.

A4 resume markdown
print-ready PDF layout

By the numbers

Single A4 page at 210×297 mm
Two-column layout with numeric achievement highlights

Files

SKILL.mdMarkdownGitHub ↗

【模板: 现代极简简历】

容器宽度模拟 A4: w-[210mm] min-h-[297mm] mx-auto, 内边距 16-20mm。
顶部姓名巨大 (text-4xl), 底下一行 contact (邮箱 / 电话 / 城市 / GitHub / LinkedIn), 中间用细竖线分隔。
主体两栏可选: 左 60% 主线（经历/项目/教育）, 右 40% 副线（技能/语言/获奖）。
章节标题: small caps 风格, 上方一条短 accent 线 (w-8 h-0.5)。
经历每条: 公司 + 职位 + 时间区间 (右对齐), 下方 1-3 条 bullet 用动词开头。
不使用花哨颜色, 黑白灰 + 1 个 accent (深蓝 / 墨绿)。
添加 @media print 样式, 隐藏不必要的元素, 颜色保留。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>林清禾 · 简历</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
  body { background:#e9e6df; font-family:'Inter','Noto Sans SC',sans-serif; color:#1a1a1a; padding:32px 0; -webkit-font-smoothing:antialiased; }
  .page { width:210mm; min-height:297mm; margin:0 auto; background:#fff; padding:18mm 16mm; box-shadow:0 30px 60px -20px rgba(0,0,0,0.18); }
  .accent { color:#1f4d8f; }
  .accent-bar { display:inline-block; width:24px; height:2px; background:#1f4d8f; vertical-align:middle; margin-right:10px; }
  .section h2 { font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#1f4d8f; margin:0 0 14px; }
  .role { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
  .role .meta { font-size:11px; color:#6b6760; font-family:'Inter',sans-serif; white-space:nowrap; tabular-nums:auto; }
  ul.bullets { list-style:none; padding:0; margin:8px 0 16px; }
  ul.bullets li { position:relative; padding-left:14px; font-size:13px; line-height:1.65; color:#262421; margin-bottom:4px; }
  ul.bullets li::before { content:""; position:absolute; left:0; top:9px; width:5px; height:5px; background:#1f4d8f; border-radius:1px; }
  @media print { body { background:#fff; padding:0; } .page { box-shadow:none; } }
</style>
</head>
<body>
<div class="page">
  <header class="pb-7 mb-7" style="border-bottom:1px solid #e7e5e0">
    <h1 class="text-[42px] font-bold tracking-tight leading-none mb-3">林清禾</h1>
    <div class="text-[12.5px] text-[#1f4d8f] font-medium tracking-wide mb-3">高级前端工程师 · Senior Frontend Engineer</div>
    <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-[11.5px] text-[#5a564e]">
      <span>📍 上海</span><span class="opacity-30">|</span>
      <span>✉ qinghe.lin@example.com</span><span class="opacity-30">|</span>
      <span>github.com/qinghelin</span><span class="opacity-30">|</span>
      <span>linkedin.com/in/qinghe</span>
    </div>
  </header>

  <section class="section mb-6">
    <h2><span class="accent-bar"></span>个人简介</h2>
    <p class="text-[13.5px] leading-[1.75] text-[#262421]">8 年前端经验, 主导过 50M+ MAU 产品的设计系统重构, 目前专注于 AI-assisted 开发工具链的产品化。</p>
  </section>

  <div class="grid grid-cols-12 gap-8">
    <div class="col-span-8">
      <section class="section mb-7">
        <h2><span class="accent-bar"></span>工作经历</h2>

        <div class="mb-5">
          <div class="role">
            <div><span class="font-semibold text-[14.5px]">Acme AI</span> <span class="text-[#5a564e] text-[13px]">— 高级前端工程师</span></div>
            <div class="meta">2023.06 - 至今</div>
          </div>
          <ul class="bullets">
            <li>设计并主导了内部 AI 编辑器产品 (从 0 到 1), 6 个月内 DAU 达到 <span class="font-semibold accent">12k</span>, 内部 NPS <span class="font-semibold accent">68</span></li>
            <li>把团队 React 16 全量升级到 React 19, <span class="font-semibold accent">0 线上回归</span>, 编译速度提升 <span class="font-semibold accent">3.2 倍</span></li>
            <li>抽象组件库, 在 7 个业务线被采用, NPM 月下载 <span class="font-semibold accent">80k+</span></li>
          </ul>
        </div>

        <div class="mb-5">
          <div class="role">
            <div><span class="font-semibold text-[14.5px]">字节跳动</span> <span class="text-[#5a564e] text-[13px]">— 前端工程师</span></div>
            <div class="meta">2020.07 - 2023.05</div>
          </div>
          <ul class="bullets">
            <li>主导抖音 PC 后台从 webpack → vite 的迁移, 冷启动从 <span class="font-semibold accent">18s</span> 降到 <span class="font-semibold accent">2.4s</span></li>
            <li>设计了一套低代码表单引擎, 服务公司 30+ 后台业务, 累计节省人天 <span class="font-semibold accent">800+</span></li>
            <li>带 4 人小队, 推动团队 TypeScript 强类型覆盖率 <span class="font-semibold accent">53% → 92%</span></li>
          </ul>
        </div>

        <div class="mb-2">
          <div class="role">
            <div><span class="font-semibold text-[14.5px]">美团</span> <span class="text-[#5a564e] text-[13px]">— 实习前端</span></div>
            <div class="meta">2019.06 - 2019.09</div>
          </div>
          <ul class="bullets">
            <li>完成外卖商家端两个核心页面的 Vue 2 → Vue 3 迁移</li>
            <li>写了一篇内部分享《组件设计的 5 个气味》, 被收藏 200+</li>
          </ul>
        </div>
      </section>

      <section class="section">
        <h2><span class="accent-bar"></span>公开项目</h2>
        <ul class="bullets">
          <li><span class="font-semibold">html-anything</span> <span class="text-[#5a564e]">(1.2k ★)</span> — 把任何文档用本地 AI agent 转成漂亮 HTML</li>
          <li><span class="font-semibold">lite-form</span> <span class="text-[#5a564e]">(450 ★)</span> — 9KB 的 React 表单库, 性能比 react-hook-form 快 1.7x</li>
        </ul>
      </section>
    </div>

    <div class="col-span-4">
      <section class="section mb-6">
        <h2><span class="accent-bar"></span>教育</h2>
        <div class="text-[13.5px] font-semibold mb-1">复旦大学</div>
        <div class="text-[12px] text-[#5a564e]">计算机科学 · 学士</div>
        <div class="text-[11.5px] text-[#5a564e] mt-1">2016 - 2020 · GPA 3.85 / 4.00</div>
      </section>

      <section class="section mb-6">
        <h2><span class="accent-bar"></span>核心技能</h2>
        <div class="flex flex-wrap gap-1.5">
          <span class="px-2 py-0.5 rounded text-[11px]" style="background:#eef2f8; color:#1f4d8f">TypeScript</span><span class="px-2 py-0.5 rounded text-[11px]" style="background:#eef2f8; color:#1f4d8f">React</span><span class="px-2 py-0.5 rounded text-[11px]" style="background:#eef2f8; color:#1f4d8f">Next.js</span><span class="px-2 py-0.5 rounded text-[11px]" style="background:#eef2f8; color:#1f4d8f">Tailwind</span><span class="px-2 py-0.5 rounded text-[11px]" style="background:#eef2f8; color:#1f4d8f">Node.js</span><span class="px-2 py-0.5 rounded text-[11px]" style="background:#eef2f8; color:#1f4d8f">Vite</span><span class="px-2 py-0.5 rounded text-[11px]" style="background:#eef2f8; color:#1f4d8f">设计系统</span><span class="px-2 py-0.5 rounded text-[11px]" style="background:#eef2f8; color:#1f4d8f">性能优化</span><span class="px-2 py-0.5 rounded text-[11px]" style="background:#eef2f8; color:#1f4d8f">团队协作</span>
        </div>
      </section>

      <section class="section mb-6">
        <h2><span class="accent-bar"></span>语言</h2>
        <ul class="text-[12px] text-[#262421] space-y-1.5">
          <li class="flex justify-between"><span>中文</span><span class="text-[#5a564e]">母语</span></li>
          <li class="flex justify-between"><span>英语</span><span class="text-[#5a564e]">CET-6 615</span></li>
          <li class="flex justify-between"><span>日语</span><span class="text-[#5a564e]">N3</span></li>
        </ul>
      </section>

      <section class="section">
        <h2><span class="accent-bar"></span>兴趣</h2>
        <p class="text-[12px] text-[#262421] leading-[1.7]">长跑 (上海半马 1:42) · 摄影 · 街角咖啡馆侦探</p>
      </section>
    </div>
  </div>
</div>
</body>
</html>