diff --git a/.github/brand/brand.lock.json b/.github/brand/brand.lock.json index f6a1c0c..e6f72db 100644 --- a/.github/brand/brand.lock.json +++ b/.github/brand/brand.lock.json @@ -1,12 +1,12 @@ { "schema_version": 2, "authority": "https://github.com/computer-mcp/.github", - "revision": "2d9913a442afcb22faca90f5272d3988eb961be6e858b71c5067303cf7c627d6", + "revision": "60eb771e701716094cbf81146e07e5856d83572aec624a7ef5c7750be32acc41", "consumer": ".github", "files": { - "profile/brand/header-light.png": "be4f591070fe6092bb39882e5ebe562b87cb0171ac3ad8df81109b6a6558a86c", - "profile/brand/header-dark.png": "38b4e4ce42cb440e658fe837899575da34761766b909482ef5a185a12251b841", - "profile/brand/avatar.png": "77ca83dfdb62ee78aebb8f4d94f0dfea7037ebde10285e1dbcec7dfc4867723e" + "profile/brand/header-light.png": "b60214fdb6aef03b13bbd46bbbfebbde43b8c74eeb3825b300013e17d19494f5", + "profile/brand/header-dark.png": "3a0be729610516dfcd3e882e2c0af351eda5d02dcc83ec12c970f53bcd875355", + "profile/brand/avatar.png": "34ce8f1feb34c6f19f9927679fc3b6532bfaa3e884920d9374d61b70d54d9134" }, "entries": { "profile/README.md": [ diff --git a/Brand/Exports/app/AppIcon.icon/Assets/01-01.svg b/Brand/Exports/app/AppIcon.icon/Assets/01-01.svg new file mode 100644 index 0000000..c1ab628 --- /dev/null +++ b/Brand/Exports/app/AppIcon.icon/Assets/01-01.svg @@ -0,0 +1 @@ + diff --git a/Brand/Exports/app/AppIcon.icon/Assets/02-01.svg b/Brand/Exports/app/AppIcon.icon/Assets/02-01.svg new file mode 100644 index 0000000..f6c855a --- /dev/null +++ b/Brand/Exports/app/AppIcon.icon/Assets/02-01.svg @@ -0,0 +1 @@ + diff --git a/Brand/Exports/app/AppIcon.icon/Assets/03-01.svg b/Brand/Exports/app/AppIcon.icon/Assets/03-01.svg new file mode 100644 index 0000000..931d03f --- /dev/null +++ b/Brand/Exports/app/AppIcon.icon/Assets/03-01.svg @@ -0,0 +1 @@ + diff --git a/Brand/Exports/app/AppIcon.icon/Assets/04-01.svg b/Brand/Exports/app/AppIcon.icon/Assets/04-01.svg new file mode 100644 index 0000000..603c67e --- /dev/null +++ b/Brand/Exports/app/AppIcon.icon/Assets/04-01.svg @@ -0,0 +1 @@ + diff --git a/Brand/Exports/app/AppIcon.icon/Assets/glyph.svg b/Brand/Exports/app/AppIcon.icon/Assets/glyph.svg deleted file mode 100644 index a75ded9..0000000 --- a/Brand/Exports/app/AppIcon.icon/Assets/glyph.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/Brand/Exports/app/AppIcon.icon/Assets/plane-capabilities.svg b/Brand/Exports/app/AppIcon.icon/Assets/plane-capabilities.svg deleted file mode 100644 index ed930cf..0000000 --- a/Brand/Exports/app/AppIcon.icon/Assets/plane-capabilities.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/Brand/Exports/app/AppIcon.icon/Assets/plane-result.svg b/Brand/Exports/app/AppIcon.icon/Assets/plane-result.svg deleted file mode 100644 index 65baca5..0000000 --- a/Brand/Exports/app/AppIcon.icon/Assets/plane-result.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/Brand/Exports/app/AppIcon.icon/Assets/plane-workspace.svg b/Brand/Exports/app/AppIcon.icon/Assets/plane-workspace.svg deleted file mode 100644 index 39b794d..0000000 --- a/Brand/Exports/app/AppIcon.icon/Assets/plane-workspace.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/Brand/Exports/app/AppIcon.icon/icon.json b/Brand/Exports/app/AppIcon.icon/icon.json index 605ed9d..3ce7f3e 100644 --- a/Brand/Exports/app/AppIcon.icon/icon.json +++ b/Brand/Exports/app/AppIcon.icon/icon.json @@ -1,64 +1,106 @@ { "fill": { - "solid": "srgb:0.08627,0.09412,0.11373,1.00000" + "automatic-gradient": "srgb:0.35294,0.29412,0.96078,1.00000" }, "groups": [ { - "layers": [ - { - "image-name": "glyph.svg", - "name": "glyph" - }, - { - "image-name": "plane-result.svg", - "name": "plane-result" - } - ], + "name": "Computer", "shadow": { "kind": "neutral", "opacity": 0.5 }, "translucency": { - "enabled": false, - "value": 0.5 - } - }, - { + "enabled": true, + "value": 0.35 + }, + "blur-material": 0.5, + "refractivity": { + "enabled": true, + "strength": 0.6, + "depth": 0 + }, "layers": [ { - "image-name": "plane-capabilities.svg", - "name": "plane-capabilities" + "image-name": "04-01.svg", + "name": "crt-body", + "fill": { + "automatic-gradient": "srgb:0.96471,0.93333,0.85882,0.65098" + } } - ], + ] + }, + { + "name": "Light", "shadow": { - "kind": "neutral", + "kind": "layer-color", "opacity": 0.5 }, "translucency": { - "enabled": false, - "value": 0.5 - } - }, - { + "enabled": true, + "value": 0.1 + }, "layers": [ { - "image-name": "plane-workspace.svg", - "name": "plane-workspace" + "image-name": "03-01.svg", + "name": "crt-light", + "fill": { + "automatic-gradient": "srgb:1.00000,0.70196,0.27843,1.00000" + } } - ], + ] + }, + { + "name": "Base", "shadow": { "kind": "neutral", - "opacity": 0.5 + "opacity": 0.4 }, "translucency": { - "enabled": false, - "value": 0.5 - } + "enabled": true, + "value": 0.35 + }, + "blur-material": 0.5, + "refractivity": { + "enabled": true, + "strength": 0.6, + "depth": 0 + }, + "layers": [ + { + "image-name": "02-01.svg", + "name": "crt-base", + "fill": { + "automatic-gradient": "srgb:0.84706,0.80392,0.69020,0.65098" + } + } + ] + }, + { + "name": "Grid", + "shadow": { + "kind": "none", + "opacity": 0 + }, + "specular": false, + "layers": [ + { + "image-name": "01-01.svg", + "name": "grid", + "fill": { + "solid": "srgb:1.00000,1.00000,1.00000,1.00000" + }, + "opacity": 0.2 + } + ] } ], "supported-platforms": { - "squares": [ - "macOS" - ] - } + "circles": [ + "watchOS" + ], + "squares": "shared" + }, + "features": [ + "refractivity" + ] } diff --git a/Brand/Exports/app/app-icon.png b/Brand/Exports/app/app-icon.png index 82b7487..2042009 100644 Binary files a/Brand/Exports/app/app-icon.png and b/Brand/Exports/app/app-icon.png differ diff --git a/Brand/Exports/app/app-icon.svg b/Brand/Exports/app/app-icon.svg deleted file mode 100644 index 78044e6..0000000 --- a/Brand/Exports/app/app-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/Brand/Exports/headers/apple-cli-dark.png b/Brand/Exports/headers/apple-cli-dark.png index de8a2f4..9b419e5 100644 Binary files a/Brand/Exports/headers/apple-cli-dark.png and b/Brand/Exports/headers/apple-cli-dark.png differ diff --git a/Brand/Exports/headers/apple-cli-light.png b/Brand/Exports/headers/apple-cli-light.png index 05a5858..9353540 100644 Binary files a/Brand/Exports/headers/apple-cli-light.png and b/Brand/Exports/headers/apple-cli-light.png differ diff --git a/Brand/Exports/headers/computer-mcp-dark.png b/Brand/Exports/headers/computer-mcp-dark.png index 3bc43a3..1679ee8 100644 Binary files a/Brand/Exports/headers/computer-mcp-dark.png and b/Brand/Exports/headers/computer-mcp-dark.png differ diff --git a/Brand/Exports/headers/computer-mcp-light.png b/Brand/Exports/headers/computer-mcp-light.png index ca14a21..0ac66a7 100644 Binary files a/Brand/Exports/headers/computer-mcp-light.png and b/Brand/Exports/headers/computer-mcp-light.png differ diff --git a/Brand/Exports/headers/computer-mcp-zh-CN-dark.png b/Brand/Exports/headers/computer-mcp-zh-CN-dark.png index 7735544..e676410 100644 Binary files a/Brand/Exports/headers/computer-mcp-zh-CN-dark.png and b/Brand/Exports/headers/computer-mcp-zh-CN-dark.png differ diff --git a/Brand/Exports/headers/computer-mcp-zh-CN-light.png b/Brand/Exports/headers/computer-mcp-zh-CN-light.png index e98ae03..dde85ca 100644 Binary files a/Brand/Exports/headers/computer-mcp-zh-CN-light.png and b/Brand/Exports/headers/computer-mcp-zh-CN-light.png differ diff --git a/Brand/Exports/headers/homebrew-tap-dark.png b/Brand/Exports/headers/homebrew-tap-dark.png index ac4515b..b878c30 100644 Binary files a/Brand/Exports/headers/homebrew-tap-dark.png and b/Brand/Exports/headers/homebrew-tap-dark.png differ diff --git a/Brand/Exports/headers/homebrew-tap-light.png b/Brand/Exports/headers/homebrew-tap-light.png index 8a2b4a4..384d238 100644 Binary files a/Brand/Exports/headers/homebrew-tap-light.png and b/Brand/Exports/headers/homebrew-tap-light.png differ diff --git a/Brand/Exports/headers/plugin-claude-dark.png b/Brand/Exports/headers/plugin-claude-dark.png index 17a0a8f..73fbd35 100644 Binary files a/Brand/Exports/headers/plugin-claude-dark.png and b/Brand/Exports/headers/plugin-claude-dark.png differ diff --git a/Brand/Exports/headers/plugin-claude-light.png b/Brand/Exports/headers/plugin-claude-light.png index 2376fb9..e77f810 100644 Binary files a/Brand/Exports/headers/plugin-claude-light.png and b/Brand/Exports/headers/plugin-claude-light.png differ diff --git a/Brand/Exports/headers/plugin-codex-dark.png b/Brand/Exports/headers/plugin-codex-dark.png index b58f370..c779886 100644 Binary files a/Brand/Exports/headers/plugin-codex-dark.png and b/Brand/Exports/headers/plugin-codex-dark.png differ diff --git a/Brand/Exports/headers/plugin-codex-light.png b/Brand/Exports/headers/plugin-codex-light.png index 5fe5dfc..4ed6fce 100644 Binary files a/Brand/Exports/headers/plugin-codex-light.png and b/Brand/Exports/headers/plugin-codex-light.png differ diff --git a/Brand/Exports/headers/plugin-computer-use-dark.png b/Brand/Exports/headers/plugin-computer-use-dark.png index b438aa8..cac79e6 100644 Binary files a/Brand/Exports/headers/plugin-computer-use-dark.png and b/Brand/Exports/headers/plugin-computer-use-dark.png differ diff --git a/Brand/Exports/headers/plugin-computer-use-light.png b/Brand/Exports/headers/plugin-computer-use-light.png index 136cc8a..69948e1 100644 Binary files a/Brand/Exports/headers/plugin-computer-use-light.png and b/Brand/Exports/headers/plugin-computer-use-light.png differ diff --git a/Brand/Exports/headers/plugin-cursor-dark.png b/Brand/Exports/headers/plugin-cursor-dark.png index 0c2d183..0469dc6 100644 Binary files a/Brand/Exports/headers/plugin-cursor-dark.png and b/Brand/Exports/headers/plugin-cursor-dark.png differ diff --git a/Brand/Exports/headers/plugin-cursor-light.png b/Brand/Exports/headers/plugin-cursor-light.png index da39fe0..910d035 100644 Binary files a/Brand/Exports/headers/plugin-cursor-light.png and b/Brand/Exports/headers/plugin-cursor-light.png differ diff --git a/Brand/Exports/headers/plugin-swift-format-dark.png b/Brand/Exports/headers/plugin-swift-format-dark.png index 7f9ca89..51f0839 100644 Binary files a/Brand/Exports/headers/plugin-swift-format-dark.png and b/Brand/Exports/headers/plugin-swift-format-dark.png differ diff --git a/Brand/Exports/headers/plugin-swift-format-light.png b/Brand/Exports/headers/plugin-swift-format-light.png index 2ea0c8c..1e0c124 100644 Binary files a/Brand/Exports/headers/plugin-swift-format-light.png and b/Brand/Exports/headers/plugin-swift-format-light.png differ diff --git a/Brand/Exports/headers/plugin-trae-dark.png b/Brand/Exports/headers/plugin-trae-dark.png index fbcfe63..ffe793d 100644 Binary files a/Brand/Exports/headers/plugin-trae-dark.png and b/Brand/Exports/headers/plugin-trae-dark.png differ diff --git a/Brand/Exports/headers/plugin-trae-light.png b/Brand/Exports/headers/plugin-trae-light.png index 1684c9a..a7aee95 100644 Binary files a/Brand/Exports/headers/plugin-trae-light.png and b/Brand/Exports/headers/plugin-trae-light.png differ diff --git a/Brand/Exports/icons/apple-cli.png b/Brand/Exports/icons/apple-cli.png index 161e16e..e7398ef 100644 Binary files a/Brand/Exports/icons/apple-cli.png and b/Brand/Exports/icons/apple-cli.png differ diff --git a/Brand/Exports/icons/apple-cli.svg b/Brand/Exports/icons/apple-cli.svg index 9a827fa..3205445 100644 --- a/Brand/Exports/icons/apple-cli.svg +++ b/Brand/Exports/icons/apple-cli.svg @@ -1,4 +1,4 @@ - - + + diff --git a/Brand/Exports/icons/computer-mcp.png b/Brand/Exports/icons/computer-mcp.png deleted file mode 100644 index 928302b..0000000 Binary files a/Brand/Exports/icons/computer-mcp.png and /dev/null differ diff --git a/Brand/Exports/icons/computer-mcp.svg b/Brand/Exports/icons/computer-mcp.svg deleted file mode 100644 index 78044e6..0000000 --- a/Brand/Exports/icons/computer-mcp.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/Brand/Exports/icons/homebrew-tap.png b/Brand/Exports/icons/homebrew-tap.png index 4e9b977..0323a2a 100644 Binary files a/Brand/Exports/icons/homebrew-tap.png and b/Brand/Exports/icons/homebrew-tap.png differ diff --git a/Brand/Exports/icons/homebrew-tap.svg b/Brand/Exports/icons/homebrew-tap.svg index 5733c7e..0a96ec9 100644 --- a/Brand/Exports/icons/homebrew-tap.svg +++ b/Brand/Exports/icons/homebrew-tap.svg @@ -1,4 +1,4 @@ - - + + diff --git a/Brand/Exports/icons/plugin-claude.png b/Brand/Exports/icons/plugin-claude.png index 2279427..51b1bb3 100644 Binary files a/Brand/Exports/icons/plugin-claude.png and b/Brand/Exports/icons/plugin-claude.png differ diff --git a/Brand/Exports/icons/plugin-claude.svg b/Brand/Exports/icons/plugin-claude.svg index c471dec..9d0e762 100644 --- a/Brand/Exports/icons/plugin-claude.svg +++ b/Brand/Exports/icons/plugin-claude.svg @@ -1,4 +1,4 @@ - - + + diff --git a/Brand/Exports/icons/plugin-codex.png b/Brand/Exports/icons/plugin-codex.png index eb48b25..df8a261 100644 Binary files a/Brand/Exports/icons/plugin-codex.png and b/Brand/Exports/icons/plugin-codex.png differ diff --git a/Brand/Exports/icons/plugin-codex.svg b/Brand/Exports/icons/plugin-codex.svg index 94b2a72..f2050fc 100644 --- a/Brand/Exports/icons/plugin-codex.svg +++ b/Brand/Exports/icons/plugin-codex.svg @@ -1,4 +1,4 @@ - - + + diff --git a/Brand/Exports/icons/plugin-computer-use.png b/Brand/Exports/icons/plugin-computer-use.png index 8c85a6b..9b2b5fb 100644 Binary files a/Brand/Exports/icons/plugin-computer-use.png and b/Brand/Exports/icons/plugin-computer-use.png differ diff --git a/Brand/Exports/icons/plugin-computer-use.svg b/Brand/Exports/icons/plugin-computer-use.svg index 0204e5e..fe5a81c 100644 --- a/Brand/Exports/icons/plugin-computer-use.svg +++ b/Brand/Exports/icons/plugin-computer-use.svg @@ -1,4 +1,4 @@ - - + + diff --git a/Brand/Exports/icons/plugin-cursor.png b/Brand/Exports/icons/plugin-cursor.png index bc7ebd5..df39b04 100644 Binary files a/Brand/Exports/icons/plugin-cursor.png and b/Brand/Exports/icons/plugin-cursor.png differ diff --git a/Brand/Exports/icons/plugin-cursor.svg b/Brand/Exports/icons/plugin-cursor.svg index 6935857..71a92b4 100644 --- a/Brand/Exports/icons/plugin-cursor.svg +++ b/Brand/Exports/icons/plugin-cursor.svg @@ -1,4 +1,4 @@ - - + + diff --git a/Brand/Exports/icons/plugin-swift-format.png b/Brand/Exports/icons/plugin-swift-format.png index e8564cf..a590c1a 100644 Binary files a/Brand/Exports/icons/plugin-swift-format.png and b/Brand/Exports/icons/plugin-swift-format.png differ diff --git a/Brand/Exports/icons/plugin-swift-format.svg b/Brand/Exports/icons/plugin-swift-format.svg index dd858f5..23b5e66 100644 --- a/Brand/Exports/icons/plugin-swift-format.svg +++ b/Brand/Exports/icons/plugin-swift-format.svg @@ -1,4 +1,4 @@ - - + + diff --git a/Brand/Exports/icons/plugin-trae.png b/Brand/Exports/icons/plugin-trae.png index 31634ae..1948c08 100644 Binary files a/Brand/Exports/icons/plugin-trae.png and b/Brand/Exports/icons/plugin-trae.png differ diff --git a/Brand/Exports/icons/plugin-trae.svg b/Brand/Exports/icons/plugin-trae.svg index f12e4a4..bd654fb 100644 --- a/Brand/Exports/icons/plugin-trae.svg +++ b/Brand/Exports/icons/plugin-trae.svg @@ -1,4 +1,4 @@ - - + + diff --git a/Brand/Exports/manifest.json b/Brand/Exports/manifest.json index b7b03ee..f254469 100644 --- a/Brand/Exports/manifest.json +++ b/Brand/Exports/manifest.json @@ -1,79 +1,85 @@ { "schema_version": 1, "inputs": { - "DESIGN.md": "07981cdc584fda8b9fe489cf270592f90a9d5ac61ee8396218f442b85588ed07", - "Brand/config.json": "ca4a7ec80be9ce04b8570919314cb8476ffcb8c905e81348df4c77a95108b455", - "Brand/icons.mjs": "1c3676dcdc5fdcaf81daa096dc61a536be2f02704748d3c02bda918fb26cb97d", - "Brand/render.mjs": "72fed35cca491cacac07cc69e70ca69fa29cf61b7f906e7c52eae650fbaa52db", + "DESIGN.md": "c3f499e7cbd755914f80e1216b370e39c76097dbfdcddb9b3c65343aae241722", + "Brand/config.json": "20078d557968e6dc4ff27904f71dd8dab73b63d5c5d90adf1c0ab85d5c108cab", + "Brand/icons.mjs": "19ef1b5d8e73b07228f814b1db1e84e2182c890a66459f24f4597ec10e9d6621", + "Brand/render.mjs": "280e5d9ec6bbfab51680b2a685b369669885efa094fa98879d0771cd617de3bb", "Brand/package.json": "c5d5e11a37021178ac682ce2fd64a2f55dc4dfe4f333b64f0079cb1ef54686cd", - "Brand/package-lock.json": "20c5a9a8deb540da6cd2a0bbce74c944c80436b770268b0a84938058b483c169" + "Brand/package-lock.json": "20c5a9a8deb540da6cd2a0bbce74c944c80436b770268b0a84938058b483c169", + "Brand/app-icon/layers/crt-base.svg": "ab43ecd6e819f7f8713ddf9deecf02198c81d6ebcd0f1b86d4f159db506f98c7", + "Brand/app-icon/layers/crt-body.svg": "1323e36e89c20fce714888872965af41b2f5a17738d7a49aa69a198b95d9af54", + "Brand/app-icon/layers/crt-light.svg": "497967f011f5147ccf039ff5fee3993764aad2c45746ce411f5058a392ca65a4", + "Brand/app-icon/layers/grid.svg": "5695b3bb0134f47ca6950438df98dce38c92591b57af14ff6114135e857b9d0c" }, "renderer": { "playwright": "1.63.0", "chromium": "153.0.8010.12", "node": "v25.8.1", "platform": "darwin", - "architecture": "arm64" + "architecture": "arm64", + "ictool": { + "bundle-version": "129", + "short-bundle-version": "27.0" + }, + "app_icons_sha256": "afeef6b0ed8a88dae42d09283633b321e29890a526b775fa506b23d27ea2fd9e" }, "exports": { - "app/AppIcon.icon/Assets/glyph.svg": "bd32f4608a2eab804d8cf0111aa57fc36d3a4941d1e799f1acbe59adb5a45dab", - "app/AppIcon.icon/Assets/plane-capabilities.svg": "29c598be035a6270d387c7b0b46cb83de415160c55b275c9aa83bbdf4952396e", - "app/AppIcon.icon/Assets/plane-result.svg": "e0beeac54b3e1a1a442a13527032d5ced644040f5e9b2f877d431d36a458170e", - "app/AppIcon.icon/Assets/plane-workspace.svg": "b745481845148ba636bef4a5cdbc070cf3d48aaa0ee778eb12e10ee8bd5395c9", - "app/AppIcon.icon/icon.json": "e2238e493bc3d2e98bc9a170a3eca4344f0cdf55eca84d4a770c1fe3c0b8938b", - "app/app-icon.png": "ed23a2ad2a16095442ee0f3df4105ebec08879b4e15b57a435644121271ff7b4", - "app/app-icon.svg": "28250027a8aeafb3ec79defabd89d2279c4329fd2fd64cfc923b8803a78416f9", - "headers/apple-cli-dark.png": "ad3fcc36c67496bf610c918fceb171f95f268f42f6dfefccea7991b6a1a0fee6", - "headers/apple-cli-light.png": "eb39f3783529e1d74d1f5d7ed95fd008014b8a6af27369aa2cffbd5976935edb", - "headers/computer-mcp-dark.png": "38b4e4ce42cb440e658fe837899575da34761766b909482ef5a185a12251b841", - "headers/computer-mcp-light.png": "be4f591070fe6092bb39882e5ebe562b87cb0171ac3ad8df81109b6a6558a86c", - "headers/computer-mcp-zh-CN-dark.png": "08d8f006bf3e1eefcbb13627fdf5ab024c164f92b978dc8019ccd8af9bded15c", - "headers/computer-mcp-zh-CN-light.png": "c72c89c9abc2ee4668220cd33c6192da93dbf31a747151814010acab9b2f1430", - "headers/homebrew-tap-dark.png": "8a5ebf11564760a1bdab38760be886f2749cab6154f5930013eb34e5710db6cf", - "headers/homebrew-tap-light.png": "787c2458bfdb9b0a05934d85881458ed8dfb91e1599cf55b776dba6b5e56390c", - "headers/plugin-claude-dark.png": "2e68e1fc465ca83e294da806e8ec8a455fceeeefd598beda27c08a720bab80b5", - "headers/plugin-claude-light.png": "03277261db524124c7779e7ce7108d82265f0c19a3ea1934066b688bb0a89306", - "headers/plugin-codex-dark.png": "96ecb466a74b98e236197e3601b5c37118b4cdb3e5cb1d2322c2e45bb2fce7d0", - "headers/plugin-codex-light.png": "8ff8b0fa648a3e6c9b8e89626a14de9fcfc49eaa8fbe562253329f1d16228674", - "headers/plugin-computer-use-dark.png": "38ed51e1ebeefadf2ff1c7dce4a387738bffae38eeb53bddc38fc484dedc9559", - "headers/plugin-computer-use-light.png": "25ff7aa6d8201d288ee575f5e90fdfe104c10d2c7f1b66e6cfa35a7b04f97b65", - "headers/plugin-cursor-dark.png": "69bdf7c5db793000ffcf735009974f81b8f7e31796e46f68f5652163ba286e55", - "headers/plugin-cursor-light.png": "161f150204a11469dbba6801f4d78dc907b1356ca378d972f6a0edbdf51b740c", - "headers/plugin-swift-format-dark.png": "ab670577f37e1e2eacef7b5d9973b51ebe536dbd585f3aa6dd380e3c6eb36129", - "headers/plugin-swift-format-light.png": "df3dc66b262d521640b2e11f8ee85d210e53a7f823136f65a7e197be288e5d4a", - "headers/plugin-trae-dark.png": "ac62b8502b9c2525da42430274f24a54b3a01fe8dd37d101fb8baf80f368bb7e", - "headers/plugin-trae-light.png": "e8caada6cf01f275305f57e11c10606c360314c7bd3b0d1be7bce18e3a4667b9", - "icons/apple-cli.png": "cabccf5167115edfc1416f307c15981b03c9cf187b61bcb4fde4182055ac7a3b", - "icons/apple-cli.svg": "e98242d30635e488f7ecda934f1738901aea3b8355dde81a72536081c224fbcd", - "icons/computer-mcp.png": "0918c571f34c062525ef1b394de58e93be24881d75bea17424706781cf814a45", - "icons/computer-mcp.svg": "28250027a8aeafb3ec79defabd89d2279c4329fd2fd64cfc923b8803a78416f9", - "icons/homebrew-tap.png": "ffa2d616e6bea6a9821b46683947a0d7663b35ebd2f30c742fe14cc13404a160", - "icons/homebrew-tap.svg": "335b739a90d3c8a866bb2bc10fb13bf9ef94e778faf5a54a498eb0a63e5f4f6f", - "icons/plugin-claude.png": "97604f3302f5341af20204ce7e9337153ac4c8ca9a07ffd63320ec41941b0aee", - "icons/plugin-claude.svg": "a3b8c20af24a0043ff6e4739e3915b523684347a693121e435a1c7501767e7e1", - "icons/plugin-codex.png": "e1e422fb2b62cdff177d3ce34299226de88d4951ac4b2fea94a9164c8e4b82d0", - "icons/plugin-codex.svg": "c482350f0ebd76536cd54da6ebb3e4a86cb2529319bb6492dbe0352ac5b63569", - "icons/plugin-computer-use.png": "cbdcd1b174354baa0d81ead4cf5bc13e44a02533950799911444211b23bce6d7", - "icons/plugin-computer-use.svg": "1d848bfa746345d91cf4b5eb9c72b8867b9b8b7c6ce87b3289b85aac7bf42448", - "icons/plugin-cursor.png": "06f2de5e34d9e61aae2f7fb315aa7b4bfa545730e447f439514eefefd04e38e6", - "icons/plugin-cursor.svg": "f19e591ff6ba15a4f7d38b080daf4b2773f1c947310ba723e78c9a00c57889d4", - "icons/plugin-swift-format.png": "811589327fe91eb0e21a1cdeeedd0fa8512c448c98787994975b5083855fa4ea", - "icons/plugin-swift-format.svg": "13c00eb123261f16af3af6af58dc6e4c1e94575c4a48440127eee38ded5b5e17", - "icons/plugin-trae.png": "4fcc64743ea68cba601c292315ef547af997b19afe50e60215588623832849d7", - "icons/plugin-trae.svg": "2ad5ea06b14a2347536bdb466afdc82b8ac0d24383e80b789c0205212216bf07", - "social/apple-cli.png": "159a4e33130225d3feab7a6a7560ad932d4046c3d2c301e38d5cb9532b9bd5a1", - "social/computer-mcp-zh-CN.png": "7f5b90e73ec27078796db3e20b339d850cb0afb24bdb17d738d26ce185ccc744", - "social/computer-mcp.png": "574a4ddb9e0787880af0db87a611e81f101280cf0588176ffcdbf15d303e4c69", - "social/homebrew-tap.png": "40d5358c08c7c1f19ce0072fefde731330ff46d8656ac01dc7ed8a54cf6a5996", - "social/plugin-claude.png": "287ac8ebf4123e90fc75487fc68c4a8e819847db3bb87fe46710453d1aacf94d", - "social/plugin-codex.png": "3d3ce9c8a276fb698dd9fe5f876bdb83f8badf7da2a1e1129b5dc4711a9c96c1", - "social/plugin-computer-use.png": "c5290a1b0895e351f38f21ef7dd2a6b304053bc4bb02bd408495b852aca8babb", - "social/plugin-cursor.png": "5d727385c06ab5084b65311e1c4183eaefd434cce9f2773829484bf400b17222", - "social/plugin-swift-format.png": "0670f9bc4c04ed705b45190654cefd04a43d986d4821ea4def1c472546694665", - "social/plugin-trae.png": "8963d6081afa455c5f0f95553f73c8498071dfbf5b8dafee2575a3f30159671f", - "web/apple-touch-icon.png": "198e9dfabecc73bfcc2608cb0ff963694e0811bbfa23337cadcfd7a4da38e0af", - "web/avatar.png": "77ca83dfdb62ee78aebb8f4d94f0dfea7037ebde10285e1dbcec7dfc4867723e", - "web/favicon-32.png": "50ca36c37a8b480d4081fd4bcb7b9fdc1be10272ca8e51f554adcf343999900f", - "web/favicon.svg": "a60dff8e1adb06eb431d09b113b12f5e47b75a5f759fcbcc91083ddf1305d292" + "app/AppIcon.icon/Assets/01-01.svg": "5695b3bb0134f47ca6950438df98dce38c92591b57af14ff6114135e857b9d0c", + "app/AppIcon.icon/Assets/02-01.svg": "ab43ecd6e819f7f8713ddf9deecf02198c81d6ebcd0f1b86d4f159db506f98c7", + "app/AppIcon.icon/Assets/03-01.svg": "497967f011f5147ccf039ff5fee3993764aad2c45746ce411f5058a392ca65a4", + "app/AppIcon.icon/Assets/04-01.svg": "1323e36e89c20fce714888872965af41b2f5a17738d7a49aa69a198b95d9af54", + "app/AppIcon.icon/icon.json": "5daf706ea7f4aba95985a2efc9a2cf1eeea797d4ef59db1c20920e61db10a2dd", + "app/app-icon.png": "71cbd902b28a083e7726abfa5d2fe506c860b5d954fd398686af1478e6250e80", + "headers/apple-cli-dark.png": "db2fe834c1d26a2fd16af2625f93f0c8d0a260966be7028868a2bf7cfb5f4883", + "headers/apple-cli-light.png": "b31e03d2cb86ae2f30f1d8aa72ba17a6b8be43570869fb71faca03e08ab74254", + "headers/computer-mcp-dark.png": "3a0be729610516dfcd3e882e2c0af351eda5d02dcc83ec12c970f53bcd875355", + "headers/computer-mcp-light.png": "b60214fdb6aef03b13bbd46bbbfebbde43b8c74eeb3825b300013e17d19494f5", + "headers/computer-mcp-zh-CN-dark.png": "e257d6196952680a48bd3ffcbfa7a6564e07babadc8c29bed889058f9b8d0942", + "headers/computer-mcp-zh-CN-light.png": "c63b65ad7a8ec26313ade9d53fcf94cc84f4da2753860e84c663eaf9d270b627", + "headers/homebrew-tap-dark.png": "959c4e2854a36dc62923a9e21b445474cff79621c0bf33ab0c2424fc9661e4d0", + "headers/homebrew-tap-light.png": "a2ff3b55357f0660245b5222b895e649043f58e1e9bda77dad940c8d07024ee3", + "headers/plugin-claude-dark.png": "db4614eaccf0ce6317e2e7ff910b89ad499ad98c3f50865840a55c791011cb01", + "headers/plugin-claude-light.png": "0fbf2b5e98ce6e4984bed19c1df0e4e21fde7b5bb4e0cfb76273d644ffcb3576", + "headers/plugin-codex-dark.png": "284e75d364ae05f1c25ad3bd241dd4cf6c2c012e1112378922ae65e7ea94cf83", + "headers/plugin-codex-light.png": "c6245f769253420f441ffd4f7dc4984568e44a682ce8b73e0a13d7d8a5cf77df", + "headers/plugin-computer-use-dark.png": "a5aca2c9ca572d8674dde94f54dbdcb6e81aa605865b474065c2782cf899d46a", + "headers/plugin-computer-use-light.png": "85f5bff21ad8d9df003bd32586a1ce47e16a6e3e90ae44469932332f705a4b95", + "headers/plugin-cursor-dark.png": "6533afb9b7d33c62539f23dd230d18d36d919ea5e9939e1774b2aac228820768", + "headers/plugin-cursor-light.png": "afc62a6d4050a347a5e8c886b428078fc562411205ca5cd0c73a7057f8317a51", + "headers/plugin-swift-format-dark.png": "3648814c79748e095b07786f991df96ad693cf7ff077e0832df7229e0490e069", + "headers/plugin-swift-format-light.png": "6a59533af90f3d52e98b06efab35493641f2a7ef5faaaeda95c35dc7bcaa9a39", + "headers/plugin-trae-dark.png": "b5753e68b2f63547a6215e5b3268c1de4616e7c74b383db5e41e37db7940903b", + "headers/plugin-trae-light.png": "db2afc4f2f225aba3a5aeed617756dd0cbe218d054285ab249edd67c5d087d59", + "icons/apple-cli.png": "429006c506ba0ddf4c218a002588cfe5cf19138f720d1370f48e89ff3c18eb80", + "icons/apple-cli.svg": "b44de71eb1244590bdd752064a26b8b20131b2cd9e0db60437d1dfd1aed44892", + "icons/homebrew-tap.png": "4a9cbcb80d21dfaa3c1c0efa201c71ac0156e69384a7c7a8992968208b13fe77", + "icons/homebrew-tap.svg": "4c0eea8ef355377530499b8cece54c6b341c44c5faa33c172409cf8134c1b93f", + "icons/plugin-claude.png": "7ea95e7110c9da8c0394363169df89f6afbeb8226873d0f81b98704e69150ae8", + "icons/plugin-claude.svg": "38583f222d0e6bd40a7b78b2db366d244d409294aeb7152bf4690ae068507d04", + "icons/plugin-codex.png": "f95c8d4675b535584b9d864617b259949ca7c737b942151b2421abffc74b1938", + "icons/plugin-codex.svg": "9c7fcee5e8f89f2d4a66c387b9d2c982d09a8a9a88983376d7e5dc0c229b0143", + "icons/plugin-computer-use.png": "acf55d5c9804cb9249e9df7064ae35a97ccb6a21ab5106b6e6d76e3b5aee5501", + "icons/plugin-computer-use.svg": "8bf7fabb5fefd88481d7e4ff1ac023c3775f48b8295ed91262fe12ea2a386503", + "icons/plugin-cursor.png": "4cb36aaf0fcf28c49fc95aa02aa3197f8054f5d2a6057574494f8d9b698d3be0", + "icons/plugin-cursor.svg": "c356fecbcc73f0116aa93395d2d9ece24404948f809f902285148fb376f3a558", + "icons/plugin-swift-format.png": "1d22788a6bd1db301ece9cc16208490d775fbd5e43eab2522e3f49d57abe6a02", + "icons/plugin-swift-format.svg": "8fa67ce483693f49fbe16b2c6cc74607880ca1405b2d77a53d0189548162fe63", + "icons/plugin-trae.png": "d4fa00856cfcd5ab1208050f83780dfe4fb9ff882a00deca7233742622735a77", + "icons/plugin-trae.svg": "ad5636b21cb4feedd6253df84b2cdcdac55ae7c7bdd7a4d2e405600ccc04d2b1", + "social/apple-cli.png": "03195e26b2d1ddbe68a97b0ea1b544f93b16ff9f9ce9a97572c096ad919531b1", + "social/computer-mcp-zh-CN.png": "9a66ef45c7077dafb8bc4d348a7107534b1c5e7cacad91ab98fcc83e660937f8", + "social/computer-mcp.png": "ce522f0113e87d6c453b05cebd6d71ddaa8477b3380a03f40c7e9fd72726f12b", + "social/homebrew-tap.png": "d0b5f9d95c6b2bf86d745875090b535c38e1fc8f7dc84a44850818701d9bef76", + "social/plugin-claude.png": "3bf6daa858095b3784c2b996367a3a5129bcc0baf9551b5f2bdef7da1866ed82", + "social/plugin-codex.png": "81cc536d5b242607328b170d6e91304619b21721451785118df1eae43c3615bf", + "social/plugin-computer-use.png": "19ee560444285a2d5b77fbf4d58614a20b3fcff190c72a54c816e1bce66b4856", + "social/plugin-cursor.png": "62b3c54b74b0d05f2abb5b168641dd261e36aa49cb4aa0d55b42393d8c46d5ca", + "social/plugin-swift-format.png": "1898726c1de37f94c766fcc5e5a15d0fd3b796b5db482473021fb90942d34ed1", + "social/plugin-trae.png": "2849270390305db1a00aed7945a802ceec7fd133f55bb2b076e0cce5c530018f", + "web/apple-touch-icon.png": "a03354d9ef09076806c88e46acef5ecee3739e0e20137ff8741c57df68cd6c92", + "web/avatar.png": "34ce8f1feb34c6f19f9927679fc3b6532bfaa3e884920d9374d61b70d54d9134", + "web/favicon-32.png": "8897fa0aac13eb5719376881018579175d3536f0c6e6a21f617049cf8e435156", + "web/favicon.svg": "67d61a4dd2abed510df22cb3165427bca3f00ece110ec889ef7136a951d1bb94" } } diff --git a/Brand/Exports/social/apple-cli.png b/Brand/Exports/social/apple-cli.png index a693aee..4929a40 100644 Binary files a/Brand/Exports/social/apple-cli.png and b/Brand/Exports/social/apple-cli.png differ diff --git a/Brand/Exports/social/computer-mcp-zh-CN.png b/Brand/Exports/social/computer-mcp-zh-CN.png index 5cf345f..862a9d7 100644 Binary files a/Brand/Exports/social/computer-mcp-zh-CN.png and b/Brand/Exports/social/computer-mcp-zh-CN.png differ diff --git a/Brand/Exports/social/computer-mcp.png b/Brand/Exports/social/computer-mcp.png index e2f32e5..129e18a 100644 Binary files a/Brand/Exports/social/computer-mcp.png and b/Brand/Exports/social/computer-mcp.png differ diff --git a/Brand/Exports/social/homebrew-tap.png b/Brand/Exports/social/homebrew-tap.png index 3b85597..4e10db0 100644 Binary files a/Brand/Exports/social/homebrew-tap.png and b/Brand/Exports/social/homebrew-tap.png differ diff --git a/Brand/Exports/social/plugin-claude.png b/Brand/Exports/social/plugin-claude.png index 1e95269..2072d81 100644 Binary files a/Brand/Exports/social/plugin-claude.png and b/Brand/Exports/social/plugin-claude.png differ diff --git a/Brand/Exports/social/plugin-codex.png b/Brand/Exports/social/plugin-codex.png index ae58cc5..e8d105c 100644 Binary files a/Brand/Exports/social/plugin-codex.png and b/Brand/Exports/social/plugin-codex.png differ diff --git a/Brand/Exports/social/plugin-computer-use.png b/Brand/Exports/social/plugin-computer-use.png index 375ecbc..c18085e 100644 Binary files a/Brand/Exports/social/plugin-computer-use.png and b/Brand/Exports/social/plugin-computer-use.png differ diff --git a/Brand/Exports/social/plugin-cursor.png b/Brand/Exports/social/plugin-cursor.png index 66e6ecb..49450b3 100644 Binary files a/Brand/Exports/social/plugin-cursor.png and b/Brand/Exports/social/plugin-cursor.png differ diff --git a/Brand/Exports/social/plugin-swift-format.png b/Brand/Exports/social/plugin-swift-format.png index bd56802..63371f1 100644 Binary files a/Brand/Exports/social/plugin-swift-format.png and b/Brand/Exports/social/plugin-swift-format.png differ diff --git a/Brand/Exports/social/plugin-trae.png b/Brand/Exports/social/plugin-trae.png index b245d14..242120a 100644 Binary files a/Brand/Exports/social/plugin-trae.png and b/Brand/Exports/social/plugin-trae.png differ diff --git a/Brand/Exports/web/apple-touch-icon.png b/Brand/Exports/web/apple-touch-icon.png index 2202ade..7cff1b9 100644 Binary files a/Brand/Exports/web/apple-touch-icon.png and b/Brand/Exports/web/apple-touch-icon.png differ diff --git a/Brand/Exports/web/avatar.png b/Brand/Exports/web/avatar.png index e5f8b96..e66e84b 100644 Binary files a/Brand/Exports/web/avatar.png and b/Brand/Exports/web/avatar.png differ diff --git a/Brand/Exports/web/favicon-32.png b/Brand/Exports/web/favicon-32.png index 8995bdc..b320938 100644 Binary files a/Brand/Exports/web/favicon-32.png and b/Brand/Exports/web/favicon-32.png differ diff --git a/Brand/Exports/web/favicon.svg b/Brand/Exports/web/favicon.svg index 88f080f..2154c4b 100644 --- a/Brand/Exports/web/favicon.svg +++ b/Brand/Exports/web/favicon.svg @@ -1,4 +1 @@ - - - - + diff --git a/Brand/app-icon/layers/crt-base.svg b/Brand/app-icon/layers/crt-base.svg new file mode 100644 index 0000000..f6c855a --- /dev/null +++ b/Brand/app-icon/layers/crt-base.svg @@ -0,0 +1 @@ + diff --git a/Brand/app-icon/layers/crt-body.svg b/Brand/app-icon/layers/crt-body.svg new file mode 100644 index 0000000..603c67e --- /dev/null +++ b/Brand/app-icon/layers/crt-body.svg @@ -0,0 +1 @@ + diff --git a/Brand/app-icon/layers/crt-light.svg b/Brand/app-icon/layers/crt-light.svg new file mode 100644 index 0000000..931d03f --- /dev/null +++ b/Brand/app-icon/layers/crt-light.svg @@ -0,0 +1 @@ + diff --git a/Brand/app-icon/layers/grid.svg b/Brand/app-icon/layers/grid.svg new file mode 100644 index 0000000..c1ab628 --- /dev/null +++ b/Brand/app-icon/layers/grid.svg @@ -0,0 +1 @@ + diff --git a/Brand/config.json b/Brand/config.json index b596b29..a4be204 100644 --- a/Brand/config.json +++ b/Brand/config.json @@ -31,15 +31,14 @@ "zh-CN": "把结账页的超时改成 30 秒，再跑一下测试。" }, "capabilities": ["Files", "Shell", "CLI", "MCP", "Skills", "Computer Use"], - "planes": { - "workspace": "~/Developer/shop", - "capabilities": { "en": "Tools you allow", "zh-CN": "你允许的工具" } - } + "chat": "ChatGPT", + "command": "swift test", + "result": "128 tests passed", + "packets": ["file.write", "shell.run"] }, "members": [ { "repository": "computer-mcp", - "glyph": "node", "title": "Computer MCP", "line": { "en": "Wherever you chat, your computer is there.", @@ -131,7 +130,7 @@ }, "computer-mcp.github.io": { "files": { - "public/brand/icon.svg": "app/app-icon.svg", + "public/brand/icon.svg": "web/favicon.svg", "public/brand/favicon.svg": "web/favicon.svg", "public/brand/favicon-32.png": "web/favicon-32.png", "public/brand/apple-touch-icon.png": "web/apple-touch-icon.png", @@ -163,10 +162,6 @@ "sizes": { "header": [1280, 320, 2], "social": [1280, 640, 1], - "icon": [512, 512], - "app_icon": [1024, 1024], - "avatar": [1024, 1024], - "favicon": [32, 32], - "apple_touch_icon": [180, 180] + "icon": [512, 512] } } diff --git a/Brand/icons.mjs b/Brand/icons.mjs index b73a42d..71bc11d 100644 --- a/Brand/icons.mjs +++ b/Brand/icons.mjs @@ -1,11 +1,7 @@ -// Computer MCP icon family. Geometry is drawn on Apple's 1024 canvas with the body on the -// 824 grid; glyphs live in a 100-unit box. Colors come from DESIGN.md tokens. +// Computer MCP component icons and glyphs. Geometry is drawn on Apple's 1024 canvas with the body on +// the 824 grid; glyphs live in a 100-unit box. Colors come from DESIGN.md tokens. export const GLYPHS = { - node: { - strokes: ['M20 50 a30 30 0 1 0 60 0 a30 30 0 1 0 -60 0'], - fills: ['M39 50 a11 11 0 1 0 22 0 a11 11 0 1 0 -22 0'], - }, pointer: { strokes: ['M32 16 L32 78 L46 65 L56 86 L67 81 L57 60 L76 60 Z'] }, prompt: { strokes: ['M24 30 L46 50 L24 70', 'M56 72 L80 72'] }, braces: { @@ -47,23 +43,20 @@ export function glyph(name, { cx, cy, size, color, stroke }) { return `${strokes}${fills}`; } -// The mark: three planes stacked up and to the right, centred on the canvas. Small renditions -// drop the workspace plane and thicken the glyph. -function geometry(small) { - const W = 430, H = 324, R = 64, off = 58; - const n = small ? 1 : 2; +// The mark: three planes stacked up and to the right, centred on the canvas. +function geometry() { + const W = 430, H = 324, R = 64, off = 58, n = 2; const x0 = 512 - (W + n * off) / 2, y0 = 512 - (H + n * off) / 2; - const roles = small ? ['capabilities', 'result'] : ['workspace', 'capabilities', 'result']; - const planes = roles.map((role, i) => ({ role, x: x0 + i * off, y: y0 + (n - i) * off })); + const planes = ['workspace', 'capabilities', 'result'].map((role, i) => ({ role, x: x0 + i * off, y: y0 + (n - i) * off })); const front = planes[n]; - return { W, H, R, planes, glyph: { cx: front.x + W / 2, cy: front.y + H / 2, size: small ? 236 : 210, stroke: small ? 12 : 9 } }; + return { W, H, R, planes, glyph: { cx: front.x + W / 2, cy: front.y + H / 2, size: 210, stroke: 9 } }; } const planeFill = (c, role) => ({ workspace: c['icon-plane-back'], capabilities: c['icon-plane-mid'], result: c['icon-plane-front'] })[role]; // Layers in front-to-back order; each is a self-contained SVG fragment on the 1024 canvas. -function layers(c, glyphName, small) { - const g = geometry(small); +function layers(c, glyphName) { + const g = geometry(); return [ ['glyph', glyph(glyphName, { ...g.glyph, color: c['icon-glyph'] })], ...g.planes.slice().reverse().map((p) => [`plane-${p.role}`, ``]), @@ -73,42 +66,17 @@ function layers(c, glyphName, small) { const SHADOW = ''; const LIFTED = new Set(['plane-capabilities', 'plane-result']); -function artwork(c, glyphName, small) { - return layers(c, glyphName, small).reverse() +function artwork(c, glyphName) { + return layers(c, glyphName).reverse() .map(([name, body]) => (LIFTED.has(name) ? `${body}` : body)).join(''); } -// Classic macOS rendition: squircle body on the 824 grid with a soft drop shadow. -export function appIcon(c, glyphName, { small = false } = {}) { +// A component icon: squircle body on the 824 grid with a soft drop shadow. +export function componentIcon(c, glyphName) { const body = squircle(); const defs = ` ${SHADOW} `; return SVG(` - ${artwork(c, glyphName, small)}`, defs); -} - -// Full-bleed rendition for places that apply their own mask: avatars and touch icons. -const BLEED = 'translate(512 512) scale(1.2427) translate(-512 -512)'; -export function fullBleedIcon(c, glyphName) { - return SVG(`${artwork(c, glyphName, false)}`, SHADOW); -} - -// Icon Composer document: square, unmasked layers on the full canvas, background as fill. -export function iconComposer(c, glyphName) { - const hex = (h) => h.match(/[0-9a-f]{2}/gi).map((x) => (parseInt(x, 16) / 255).toFixed(5)).join(','); - const parts = layers(c, glyphName, false); - const files = Object.fromEntries(parts.map(([name, body]) => [`Assets/${name}.svg`, SVG(`${body}`)])); - const group = (names) => ({ - layers: names.map((name) => ({ 'image-name': `${name}.svg`, name })), - shadow: { kind: 'neutral', opacity: 0.5 }, - translucency: { enabled: false, value: 0.5 }, - }); - const json = { - fill: { solid: `srgb:${hex(c['icon-body'])},1.00000` }, - groups: [group(['glyph', 'plane-result']), group(['plane-capabilities']), group(['plane-workspace'])], - 'supported-platforms': { squares: ['macOS'] }, - }; - files['icon.json'] = JSON.stringify(json, null, 2) + '\n'; - return files; + ${artwork(c, glyphName)}`, defs); } diff --git a/Brand/render.mjs b/Brand/render.mjs index 21bdbf2..2c7fb86 100644 --- a/Brand/render.mjs +++ b/Brand/render.mjs @@ -1,19 +1,25 @@ // Render every Computer MCP brand asset from DESIGN.md and config.json into Exports/. -// Usage: node Brand/render.mjs (after `npm ci` and `npx playwright install --only-shell chromium`) +// Usage: APP_ICONS_SCRIPT=/path/to/app_icons.py node Brand/render.mjs +import { execFileSync } from 'node:child_process'; import crypto from 'node:crypto'; import fs from 'node:fs'; -import os from 'node:os'; import path from 'node:path'; import YAML from 'yaml'; import { chromium } from 'playwright'; -import { appIcon, fullBleedIcon, glyph, iconComposer } from './icons.mjs'; +import { componentIcon, glyph } from './icons.mjs'; const BRAND = path.dirname(new URL(import.meta.url).pathname); const ROOT = path.dirname(BRAND); const EXPORTS = path.join(BRAND, 'Exports'); -const CACHE = path.join(BRAND, '.cache', 'fonts'); -const INPUTS = ['DESIGN.md', 'Brand/config.json', 'Brand/icons.mjs', 'Brand/render.mjs', 'Brand/package.json', 'Brand/package-lock.json']; +const CACHE = path.join(BRAND, '.cache'); +const INPUTS = [ + 'DESIGN.md', 'Brand/config.json', 'Brand/icons.mjs', 'Brand/render.mjs', 'Brand/package.json', 'Brand/package-lock.json', + ...fs.readdirSync(path.join(BRAND, 'app-icon', 'layers')).filter((name) => name.endsWith('.svg')).sort() + .map((name) => `Brand/app-icon/layers/${name}`), +]; +const APP_ICONS_SCRIPT = process.env.APP_ICONS_SCRIPT; +if (!APP_ICONS_SCRIPT?.trim()) throw new Error('Set APP_ICONS_SCRIPT to the apple-app-icon-design generator script (app_icons.py). Icon Composer from Xcode is required; IC_TOOL can select its ictool.'); const sha256 = (data) => crypto.createHash('sha256').update(data).digest('hex'); const config = JSON.parse(fs.readFileSync(path.join(BRAND, 'config.json'), 'utf8')); @@ -21,10 +27,11 @@ const design = YAML.parse(fs.readFileSync(path.join(ROOT, 'DESIGN.md'), 'utf8'). const c = design.colors, t = design.typography, r = design.rounded; async function fonts() { - fs.mkdirSync(CACHE, { recursive: true }); + const directory = path.join(CACHE, 'fonts'); + fs.mkdirSync(directory, { recursive: true }); const faces = []; for (const font of config.fonts) { - const file = path.join(CACHE, `${font.sha256}.ttf`); + const file = path.join(directory, `${font.sha256}.ttf`); if (!fs.existsSync(file)) { const response = await fetch(font.url); if (!response.ok) throw new Error(`Font download failed: ${font.family}`); @@ -48,7 +55,7 @@ function typo(name, extra = {}) { ].filter(Boolean).join(';'); } -const dataUri = (svg) => `data:image/svg+xml;base64,${Buffer.from(svg).toString('base64')}`; +const dataUri = (data, type = 'image/svg+xml') => `data:${type};base64,${Buffer.from(data).toString('base64')}`; const esc = (s) => s.replace(/&/g, '&').replace(/${body}`; -// Planes offset up and to the right; front is the top-right plane. -function stack(p, { x, y, w, h, off }, labels = {}, front = '') { - const label = (role) => `display:flex;align-items:flex-end;padding:0 18px 12px;${typo(role, { fontWeight: 600, lineHeight: 1.2 })};white-space:nowrap`; - return ` -
${labels.workspace || ''}
-
${labels.capabilities || ''}
-
${front}
`; +// The App icon's computer, drawn flat from its own layers: chin, amber screen, ivory case. +// (cx, top) is the top centre of the case; h is the height of case and chin together. +const LAYER = (name) => { + const svg = fs.readFileSync(path.join(BRAND, 'app-icon', 'layers', `${name}.svg`), 'utf8'); + return svg.slice(svg.indexOf('>') + 1, svg.lastIndexOf('')).replace(/fill="#[0-9A-Fa-f]{6}"/g, ''); +}; +// Bounds in layer coordinates, copied from Brand/app-icon/layers; change them with the layers. +const CASE = { x0: 240, y0: 196, x1: 784, y1: 782 }; // case and chin +const SCREEN = { x: 300, y: 256, w: 424, h: 312 }; // the case's screen opening + +function computer(p, { cx, top, h }, screen = '') { + const s = h / (CASE.y1 - CASE.y0), x = cx - ((CASE.x0 + CASE.x1) / 2) * s, y = top - CASE.y0 * s; + const inset = `left:${x + SCREEN.x * s}px;top:${y + SCREEN.y * s}px;width:${SCREEN.w * s}px;height:${SCREEN.h * s}px`; + return ` + + ${LAYER('crt-base')} + ${LAYER('crt-light')} + ${LAYER('crt-body')} + +
${screen}
`; } function link(p, points, width = 30) { const d = 'M' + points.map(([x, y]) => `${x} ${y}`).join(' L'); return ` - `; + `; } const check = (color) => ``; @@ -98,31 +120,34 @@ const glyphSvg = (name, color, size) => `${glyphSvg(member.glyph, p.fg, 104)}`; + const isApp = member.repository === 'computer-mcp'; + const icon = isApp ? appIconPng : dataUri(componentIcon(c, member.glyph)); + const screen = isApp ? '' : glyphSvg(member.glyph, c['on-signal'], 84); + const ask = esc(config.copy.request[locale] ?? config.copy.request.en); return page(faces, 1280, 320, ` body{background:${p.bg};color:${p.fg}} .id{position:absolute;left:64px;top:0;height:320px;display:flex;align-items:center;gap:36px;z-index:2} .id img{width:184px;height:184px} .eyebrow{${typo('label-md')};color:${p.accent};margin-bottom:12px} h1{${typo('headline-lg')}} - .line{${typo('body-lg', { fontSize: '21px' })};color:${p.muted};margin-top:12px;max-width:620px} - `, `${link(p, [[1120, -20], [1120, 120]], 26)} - ${stack(p, { x: 1010, y: 96, w: 300, h: 196, off: 34 }, {}, front)} + .line{${typo('body-lg', { fontSize: '21px' })};color:${p.muted};margin-top:12px;max-width:560px} + .req{position:absolute;left:688px;top:34px;width:290px;z-index:2;background:${p.raised};border:1px solid ${p.line};border-radius:${r.lg};padding:12px;box-shadow:${p.shadow}} + .req div{${typo('body-md', { fontSize: '15px', lineHeight: 1.35 })};word-break:keep-all;background:${p.signal};color:${c['on-signal']};border-radius:16px 16px 6px 16px;padding:9px 13px} + `, `${link(p, [[972, 79], [1120, 79], [1120, 116]], 22)} + ${computer(p, { cx: 1120, top: 116, h: 184 }, screen)} +
${ask}
${member.eyebrow ? `
${esc(member.eyebrow)}
` : ''}

${esc(member.title)}

${esc(member.line[locale])}

`); } function appSocial(faces, member, locale) { const p = palette('light'); const zh = locale === 'zh-CN'; - const icon = dataUri(appIcon(c, member.glyph)); + const icon = appIconPng; const card = { x: 744, y: 64, w: 372 }; - const lx = 1200, ly = card.y + 66, F = { x: 868, y: 318, w: 380, h: 176, off: 40 }; - const result = `
-
MacBook Pro● ${zh ? '已连接' : 'connected'}
-
Sources/Checkout/Session.swift
-
$ swift test
-
${check(p.ok)} 128 tests passed · 6.2s
`; + const lx = 1000, top = 268; + const result = `
+
$ ${esc(config.copy.command)}
+
${check(c['on-signal'])} ${esc(config.copy.result)}
`; return page(faces, 1280, 640, ` body{background:${p.bg};color:${p.fg}} .top{position:absolute;left:80px;top:72px;display:flex;align-items:center;gap:24px;z-index:2} @@ -133,14 +158,13 @@ function appSocial(faces, member, locale) { .chip{${typo('label-md')};background:${c.neutral};color:${c['on-surface']};border:1px solid ${p.line};border-radius:${r.sm};padding:7px 10px} .card{position:absolute;z-index:2;background:${p.raised};border:1px solid ${p.line};border-radius:${r.lg};padding:16px 18px;box-shadow:${p.shadow}} .card .t{${typo('label-md')};color:${p.muted};margin-bottom:10px} - .ask{${typo('body-md', { fontSize: '15px' })};background:${c.tertiary};color:${c['on-accent']};border-radius:16px 16px 6px 16px;padding:9px 13px;margin-left:auto;width:fit-content} + .ask{${typo('body-md', { fontSize: '15px' })};background:${p.signal};color:${c['on-signal']};border-radius:16px 16px 6px 16px;padding:9px 13px;margin-left:auto;width:fit-content} .pk{position:absolute;z-index:3;${typo('code-md', { fontWeight: 600, lineHeight: 1.2 })};background:${p.raised};color:${p.fg};border:1px solid ${p.line};border-radius:999px;padding:6px 11px;box-shadow:0 6px 14px -6px rgba(10,16,30,.25)} .pk i{font-style:normal;color:${p.accent}} - `, `${link(p, [[card.x + card.w - 20, ly], [lx, ly], [lx, F.y + 30]], 34)} -
ChatGPT
${esc(config.copy.request[locale])}
-
→ file.write
-
→ shell.run
- ${stack(p, F, { workspace: esc(config.copy.planes.workspace), capabilities: esc(config.copy.planes.capabilities[locale]) }, result)} + `, `${link(p, [[lx, card.y + 60], [lx, top + 4]], 30)} +
${esc(config.copy.chat)}
${esc(config.copy.request[locale])}
+ ${config.copy.packets.map((name, i) => `
→ ${esc(name)}
`).join('')} + ${computer(p, { cx: lx, top, h: 300 }, result)}
${esc(member.title)}

${esc(config.copy.headline[locale]).replace('，', '，
')}

${config.copy.capabilities.map((x) => `${esc(x)}`).join('')}
`); @@ -148,9 +172,8 @@ function appSocial(faces, member, locale) { function memberSocial(faces, member) { const p = palette('light'); - const icon = dataUri(appIcon(c, member.glyph)); - const B = { x: 790, y: 96, w: 210, h: 150 }, F = { x: 904, y: 318, w: 330, h: 210, off: 42 }; - const front = `
${glyphSvg(member.glyph, p.fg, 140)}
`; + const icon = dataUri(componentIcon(c, member.glyph)); + const B = { x: 760, y: 96, w: 210, h: 150 }, cx = 1060, top = 290; return page(faces, 1280, 640, ` body{background:${p.bg};color:${p.fg}} .top{position:absolute;left:80px;top:72px;display:flex;align-items:center;gap:24px;z-index:2} @@ -161,18 +184,16 @@ function memberSocial(faces, member) { .url{position:absolute;left:80px;bottom:76px;${typo('label-lg')};color:${p.muted}} .bubble{position:absolute;z-index:2;background:${p.raised};border:1px solid ${p.line};border-radius:28px;box-shadow:${p.shadow};display:flex;align-items:center;justify-content:center;gap:16px} .bubble i{width:18px;height:18px;border-radius:50%;background:${c['on-surface']}} - `, `${link(p, [[B.x + B.w - 24, B.y + B.h / 2], [F.x + 200, B.y + B.h / 2], [F.x + 200, F.y + 30]], 34)} + `, `${link(p, [[B.x + B.w - 24, B.y + B.h / 2], [cx, B.y + B.h / 2], [cx, top + 4]], 34)}
- ${stack(p, F, {}, front)} + ${computer(p, { cx, top, h: 286 }, glyphSvg(member.glyph, c['on-signal'], 120))}
${esc(member.eyebrow)}
${esc(member.title)}

${esc(member.line.en)}

github.com/computer-mcp/${member.repository}
`); } -const browser = await chromium.launch(); -const context = await browser.newContext(); const written = new Set(); function write(name, data) { @@ -182,8 +203,44 @@ function write(name, data) { written.add(name); } +function copyDirectory(source, target) { + for (const entry of fs.readdirSync(source, { withFileTypes: true })) { + const file = path.join(source, entry.name), name = `${target}/${entry.name}`; + if (entry.isDirectory()) copyDirectory(file, name); + else write(name, fs.readFileSync(file)); + } +} + +function generateAppIcon() { + fs.mkdirSync(CACHE, { recursive: true }); + const temporary = fs.mkdtempSync(path.join(CACHE, 'app-icon-')); + const output = path.join(temporary, 'output'); + try { + execFileSync('python3', [APP_ICONS_SCRIPT, path.join(ROOT, 'DESIGN.md'), '--name', 'computer-mcp', '--style', 'liquid-glass', '--out', output], { stdio: 'inherit' }); + const manifest = JSON.parse(fs.readFileSync(path.join(output, 'manifest.json'), 'utf8')); + const png = fs.readFileSync(path.join(output, 'renditions', 'macOS-Default.png')); + fs.rmSync(EXPORTS, { recursive: true, force: true }); + copyDirectory(path.join(output, 'computer-mcp.icon'), 'app/AppIcon.icon'); + write('app/app-icon.png', png); + for (const name of ['favicon.svg', 'favicon-32.png', 'apple-touch-icon.png']) { + write(`web/${name}`, fs.readFileSync(path.join(output, 'web', name))); + } + write('web/avatar.png', fs.readFileSync(path.join(output, 'web', 'avatar-1024.png'))); + const renderer = typeof manifest.renderer === 'string' ? JSON.parse(manifest.renderer) : manifest.renderer; + return { png: dataUri(png, 'image/png'), renderer, generator: sha256(fs.readFileSync(APP_ICONS_SCRIPT)) }; + } finally { + fs.rmSync(temporary, { recursive: true, force: true }); + } +} + +const app = generateAppIcon(); +const appIconPng = app.png; +const faces = await fonts(); +const browser = await chromium.launch(); +const context = await browser.newContext(); + async function shot(name, html, [w, h, scale = 1], transparent = false) { - const tmp = path.join(os.tmpdir(), `computer-mcp-brand-${process.pid}.html`); + const tmp = path.join(CACHE, 'render.html'); fs.writeFileSync(tmp, html); const pg = await context.newPage({ deviceScaleFactor: scale }); await pg.setViewportSize({ width: w, height: h }); @@ -201,24 +258,15 @@ async function shot(name, html, [w, h, scale = 1], transparent = false) { const raster = (faces, svg, [w, h]) => page(faces, w, h, 'body{background:transparent}img{width:100%;height:100%;display:block}', ``); -fs.rmSync(EXPORTS, { recursive: true, force: true }); -const faces = await fonts(); const S = config.sizes; -for (const [name, data] of Object.entries(iconComposer(c, 'node'))) write(`app/AppIcon.icon/${name}`, data); -const app = appIcon(c, 'node'); -write('app/app-icon.svg', app); -await shot('app/app-icon.png', raster(faces, app, S.app_icon), S.app_icon, true); -write('web/favicon.svg', appIcon(c, 'node', { small: true })); -await shot('web/favicon-32.png', raster(faces, appIcon(c, 'node', { small: true }), S.favicon), S.favicon, true); -await shot('web/apple-touch-icon.png', raster(faces, fullBleedIcon(c, 'node'), S.apple_touch_icon), S.apple_touch_icon); -await shot('web/avatar.png', raster(faces, fullBleedIcon(c, 'node'), S.avatar), S.avatar); - for (const member of config.members) { const repo = member.repository; - const svg = appIcon(c, member.glyph); - write(`icons/${repo}.svg`, svg); - await shot(`icons/${repo}.png`, raster(faces, svg, S.icon), S.icon, true); + if (repo !== 'computer-mcp') { + const svg = componentIcon(c, member.glyph); + write(`icons/${repo}.svg`, svg); + await shot(`icons/${repo}.png`, raster(faces, svg, S.icon), S.icon, true); + } for (const locale of Object.keys(member.line)) { const suffix = locale === 'en' ? '' : `-${locale}`; for (const mode of ['light', 'dark']) await shot(`headers/${repo}${suffix}-${mode}.png`, header(faces, member, mode, locale), S.header); @@ -230,7 +278,7 @@ const pkg = JSON.parse(fs.readFileSync(path.join(BRAND, 'node_modules/playwright const manifest = { schema_version: 1, inputs: Object.fromEntries(INPUTS.map((name) => [name, sha256(fs.readFileSync(path.join(ROOT, name)))])), - renderer: { playwright: pkg.version, chromium: browser.version(), node: process.version, platform: process.platform, architecture: process.arch }, + renderer: { playwright: pkg.version, chromium: browser.version(), node: process.version, platform: process.platform, architecture: process.arch, ictool: app.renderer, app_icons_sha256: app.generator }, exports: Object.fromEntries([...written].sort().map((name) => [name, sha256(fs.readFileSync(path.join(EXPORTS, name)))])), }; await browser.close(); diff --git a/DESIGN.md b/DESIGN.md index 6a071c9..bcaa931 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -1,41 +1,51 @@ --- version: alpha name: Computer MCP -description: Your computer as a stack of capability planes, reached from the chat through one secure link. Paper, ink and vermilion. +description: Your computer as a compact machine whose screen lights amber when a chat works on it, on a violet field. Ivory, ink, violet and amber. colors: - primary: "#16181D" - secondary: "#5B6270" - tertiary: "#FF5A36" - neutral: "#F4F1EA" - surface: "#FBFAF6" + primary: "#17161F" + secondary: "#5F5B70" + tertiary: "#5A4BF5" + tertiary-dark: "#8B80FF" + on-tertiary: "#FFFFFF" + on-tertiary-dark: "#121019" + tertiary-hover: "#4A3BE0" + signal: "#FFB347" + signal-dark: "#FFC266" + on-signal: "#17161F" + neutral: "#F4EFE3" + surface: "#FBF8F1" surface-raised: "#FFFFFF" - on-surface: "#16181D" - on-surface-muted: "#5B6270" - line: "#E2DDD2" - surface-dark: "#121418" - surface-raised-dark: "#1C1F25" - on-surface-dark: "#F4F1EA" - on-surface-muted-dark: "#A3A9B5" - line-dark: "#2C3038" - on-accent: "#16181D" - accent-hover: "#E84A27" - accent-text: "#C2410C" - accent-text-dark: "#FF7352" - plane-back: "#3A3F48" - on-plane-back: "#B8BEC9" - link-rail: "#F2D6CC" - link-rail-dark: "#3B2621" + on-surface: "#17161F" + on-surface-muted: "#5F5B70" + line: "#E7E1D3" + surface-dark: "#121019" + surface-raised-dark: "#1C1A26" + on-surface-dark: "#F4EFE3" + on-surface-muted-dark: "#A9A4BA" + line-dark: "#2C2938" + accent-text: "#5A4BF5" + accent-text-dark: "#8B80FF" + computer-case: "#F4EFE3" + computer-case-dark: "#E9E2D2" + computer-edge: "#DDD5C3" + computer-edge-dark: "#BFB6A3" + computer-chin: "#E3DAC6" + computer-chin-dark: "#CFC5B0" + link-rail: "#E6E2FF" + link-rail-dark: "#2A2547" success: "#1A7A43" success-dark: "#5FD08A" danger: "#B42318" danger-dark: "#FF8A8A" - caution: "#FFB224" - focus: "#3D6BFF" - icon-body: "#16181D" - icon-plane-back: "#3A3F48" - icon-plane-mid: "#FF5A36" - icon-plane-front: "#F4F1EA" - icon-glyph: "#16181D" + caution: "#FFCC00" + focus: "#5A4BF5" + focus-dark: "#8B80FF" + icon-body: "#17161F" + icon-plane-back: "#2B2740" + icon-plane-mid: "#FFB347" + icon-plane-front: "#F4EFE3" + icon-glyph: "#17161F" typography: headline-display: fontFamily: Inter @@ -120,7 +130,6 @@ spacing: section: 112px content-max: 1180px gutter: 24px - plane-offset: 48px link-width: 40px components: page: @@ -148,13 +157,19 @@ components: typography: "{typography.label-md}" button-primary: backgroundColor: "{colors.tertiary}" - textColor: "{colors.on-accent}" + textColor: "{colors.on-tertiary}" typography: "{typography.label-lg}" rounded: "{rounded.md}" padding: 14px button-primary-hover: - backgroundColor: "{colors.accent-hover}" - textColor: "{colors.on-accent}" + backgroundColor: "{colors.tertiary-hover}" + textColor: "{colors.on-tertiary}" + button-primary-dark: + backgroundColor: "{colors.tertiary-dark}" + textColor: "{colors.on-tertiary-dark}" + typography: "{typography.label-lg}" + rounded: "{rounded.md}" + padding: 14px button-secondary: backgroundColor: "{colors.surface-raised}" textColor: "{colors.on-surface}" @@ -180,35 +195,39 @@ components: rounded: "{rounded.lg}" padding: 18px chat-request: - backgroundColor: "{colors.tertiary}" - textColor: "{colors.on-accent}" + backgroundColor: "{colors.signal}" + textColor: "{colors.on-signal}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 10px - plane-workspace: - backgroundColor: "{colors.plane-back}" - textColor: "{colors.on-plane-back}" - typography: "{typography.label-md}" - rounded: "{rounded.lg}" - padding: 20px - plane-capabilities: - backgroundColor: "{colors.tertiary}" - textColor: "{colors.on-accent}" - typography: "{typography.label-md}" + chat-request-dark: + backgroundColor: "{colors.signal-dark}" + textColor: "{colors.on-signal}" + typography: "{typography.body-md}" rounded: "{rounded.lg}" - padding: 20px - plane-result: - backgroundColor: "{colors.surface-raised}" - textColor: "{colors.on-surface}" + padding: 10px + computer-case: + backgroundColor: "{colors.computer-case}" + computer-case-dark: + backgroundColor: "{colors.computer-case-dark}" + computer-edge: + backgroundColor: "{colors.computer-edge}" + width: 1.5px + computer-edge-dark: + backgroundColor: "{colors.computer-edge-dark}" + width: 1.5px + computer-chin: + backgroundColor: "{colors.computer-chin}" + computer-chin-dark: + backgroundColor: "{colors.computer-chin-dark}" + computer-screen: + backgroundColor: "{colors.signal}" + textColor: "{colors.on-signal}" typography: "{typography.code-md}" - rounded: "{rounded.lg}" - padding: 20px - plane-result-dark: - backgroundColor: "{colors.surface-raised-dark}" - textColor: "{colors.on-surface-dark}" + computer-screen-dark: + backgroundColor: "{colors.signal-dark}" + textColor: "{colors.on-signal}" typography: "{typography.code-md}" - rounded: "{rounded.lg}" - padding: 20px link-rail: backgroundColor: "{colors.link-rail}" width: "{spacing.link-width}" @@ -216,7 +235,7 @@ components: backgroundColor: "{colors.link-rail-dark}" width: "{spacing.link-width}" link-active: - backgroundColor: "{colors.tertiary}" + backgroundColor: "{colors.signal}" width: 6px packet: backgroundColor: "{colors.surface-raised}" @@ -273,16 +292,19 @@ components: focus-ring: backgroundColor: "{colors.focus}" width: 2px - app-icon-body: + focus-ring-dark: + backgroundColor: "{colors.focus-dark}" + width: 2px + component-icon-body: backgroundColor: "{colors.icon-body}" size: 824px - app-icon-plane-workspace: + component-icon-plane-workspace: backgroundColor: "{colors.icon-plane-back}" rounded: "{rounded.plane}" - app-icon-plane-capabilities: + component-icon-plane-capabilities: backgroundColor: "{colors.icon-plane-mid}" rounded: "{rounded.plane}" - app-icon-plane-result: + component-icon-plane-result: backgroundColor: "{colors.icon-plane-front}" textColor: "{colors.icon-glyph}" rounded: "{rounded.plane}" @@ -293,16 +315,18 @@ components: ## Overview Computer MCP lets the chat people already use reach their own computers. ChatGPT can read and write -code and run commands there, use local CLI tools, MCP servers, Skills and Computer Use, and hand work -to Codex, Claude Code or Cursor when that helps. Each computer decides what it allows. +code and run commands there, use local CLI tools, MCP servers, Skills and Computer Use, and hand +work to Codex, Claude Code or Cursor when that helps. Each computer decides what it allows. -The visual system draws that model directly. The computer is a **stack of planes** — the authorized -workspace at the back, the capabilities in the middle, the result in front. The chat is a separate -card, and one **secure link** runs from it into the stack; calls travel along the link as small -packets. Everything that belongs to the active path — the request, the link and the capability -plane it reaches — is vermilion. +The visual system draws that model directly. The computer is the **compact machine** of the App icon +— an ivory case, a recessed chin and a screen. The chat is a separate card, and one **secure link** +runs from its request into the computer; calls travel along the link as small packets. Everything +that belongs to the active path — the request, the link and the screen it lights — is amber. Each +member repository shows the same computer with its own glyph on the screen. Violet is the field the +computer stands on and the color of actions: buttons and links. -The look is warm, tactile and exact: paper and ink, crisp offset shadows, plain system type. It +The look is warm, tactile and exact: ivory and ink with one violet field and one amber light, +crisp offset shadows, plain system type. It should feel like a well-made tool that runs on your own machine, not a cloud service. Audience: developers and people who want ChatGPT to code and operate their computer for them. Tone: direct, concrete, unhurried. Density: generous on marketing surfaces, compact in reference material. @@ -315,19 +339,25 @@ About window. ## Colors -- **Ink (#16181D):** text, the App icon body and code surfaces. Never pure black. -- **Slate (#5B6270):** secondary text, captions and metadata. -- **Vermilion (#FF5A36):** the active path and the primary action. Labels on vermilion are ink; - vermilion text on light surfaces uses **#C2410C**, and on dark surfaces **#FF7352**. Hover - darkens the fill to **#E84A27**. -- **Paper (#F4F1EA):** chips and the front plane of the App icon. -- **Graphite (#3A3F48):** the workspace plane, with **#B8BEC9** labels. -- **Link rail (#F2D6CC; #3B2621 on dark):** the band under the active link. -- **Surfaces:** page **#FBFAF6** and raised **#FFFFFF** in light mode; **#121418** and **#1C1F25** - in dark mode, with lines **#E2DDD2** and **#2C3038**. +- **Ink (#17161F):** text, the component icon body and code surfaces. Never pure black. +- **Slate (#5F5B70):** secondary text, captions and metadata. +- **Violet (#5A4BF5; #8B80FF on dark):** actions and navigation — primary buttons, links and the + App icon's field. Labels on violet are white (#121019 on the dark-mode violet). Hover darkens the + fill to **#4A3BE0**. +- **Amber (#FFB347; #FFC266 on dark):** the active path — the chat request, the active link and the + screen it lights — plus the App icon's screen and the middle plane of component icons. Labels on + amber are ink; amber is never used as text on light surfaces. +- **Ivory (#F4EFE3):** chips, the computer's case (**#DDD5C3** edge, **#E3DAC6** chin; **#E9E2D2**, + **#BFB6A3** and **#CFC5B0** on dark), the front plane of component icons and text on code + surfaces. +- **Violet ink (#2B2740):** the back plane of component icons. +- **Link rail (#E6E2FF; #2A2547 on dark):** the band under the active link. +- **Surfaces:** page **#FBF8F1** and raised **#FFFFFF** in light mode; **#121019** and **#1C1A26** + in dark mode, with lines **#E7E1D3** and **#2C2938**. - **Status:** success **#1A7A43** (**#5FD08A** on dark), removals **#B42318** (**#FF8A8A** on dark), - caution **#FFB224** with ink text for actions that need confirmation. -- **Focus (#3D6BFF):** keyboard focus rings only; never decorative. + caution **#FFCC00** with ink text for actions that need confirmation — a badge only, distinct + from the amber of the active path. +- **Focus (#5A4BF5; #8B80FF on dark):** keyboard focus rings only; never decorative. Every surface exists in light and dark and follows the viewer's system appearance. Text pairs meet WCAG AA in both modes. @@ -335,103 +365,226 @@ WCAG AA in both modes. ## Typography Interface text uses the platform's system typeface, the way Apple's own pages do: **SF Pro** for -Latin text, **PingFang SC** for Chinese and **SF Mono** for code on Apple devices, through the system -font stack on the web. Headlines are semibold with slightly tight tracking; labels, buttons and -navigation are set in the same sans in sentence case. Monospace is reserved for real code: tool +Latin text, **PingFang SC** for Chinese and **SF Mono** for code on Apple devices, through the +system font stack on the web. Headlines are semibold with slightly tight tracking; labels, buttons +and navigation are set in the same sans in sentence case. Monospace is reserved for real code: tool names, paths, commands and output. Apple's font license does not cover brand artwork, so text rendered into images — headers, social cards and icons — uses bundled open fonts that match the system faces: **Inter** (OFL) for Latin, -**Noto Sans SC** (OFL) for Chinese and **JetBrains Mono** (OFL) for code. The tokens above carry these -artwork faces; web text maps them to the system stack. +**Noto Sans SC** (OFL) for Chinese and **JetBrains Mono** (OFL) for code. The tokens above carry +these artwork faces; web text maps them to the system stack. ## Layout A 12-column grid capped at 1180px with 24px gutters; marketing sections are separated by 112px and spacing follows a 4px unit. Reference pages use a single 720px reading column. -- **Hero:** copy on the left; on the right, the chat card sits high and the stack sits low, with the - link leaving the chat card, bending once and entering the top of the stack. Packets sit on the - vertical run of the link. -- **README header (1280 × 320, light and dark):** icon and name on the left, one supporting line, - and a small stack-and-link motif breaking the right edge. -- **Social card (1280 × 640):** icon and name at the top left, the headline below, capability chips at - the bottom and the motif on the right. -- **Website:** compact sticky navigation with the App icon, product name, core links, language switch - and download action; the hero; capability examples for files and commands, CLI, MCP, Skills, - Computer Use and coding-agent hand-off; how hosts connect and how permissions work on each +- **Hero:** copy on the left; on the right, the chat card sits high and the computer sits low, with + the link leaving the request, bending once and entering the top of the computer. Packets sit on + the vertical run of the link. +- **README header (1280 × 320, light and dark):** icon and name on the left, one supporting line; + on the right the request bubble, the link turning down into the top of the computer, and the + member's glyph on its amber screen (the App's screen is plain amber). +- **Social card (1280 × 640):** icon and name at the top left with the headline below. The App card + adds capability chips at the bottom and, on the right, the chat card, the link with its packets + and the computer whose screen shows the command and its passing result. A member card carries its family eyebrow and its repository address, and links a typing bubble into the + computer showing its glyph. +- **Website:** compact sticky navigation with the App icon, product name, core links, language + switch and download action; the hero; capability examples for files and commands, CLI, MCP, + Skills, Computer Use and coding-agent hand-off; how hosts connect and how permissions work on each computer; a dated, sourced comparison with related products; three setup steps with a first safe tool call; FAQ, closing line and organization footer. The homepage is Chinese by default with a complete English version. ## Elevation & Depth -Depth comes from **offset stacking**, not blur. A plane sits 48px up and to the right of the plane -beneath it and casts a short, crisp shadow (`0 1px 0 rgba(0,0,0,.05), 0 22px 40px -14px -rgba(10,16,30,.30)`). At most three planes stack. The chat card uses the same shadow. The link runs -on the page plane, beneath cards and planes. In dark mode, shadows deepen -(`0 24px 48px -16px rgba(0,0,0,.6)`) and raised surfaces add a 1px line border. +Depth comes from **crisp shadows and layering**, not blur. Cards cast a short shadow (`0 1px 0 +rgba(0,0,0,.05), 0 22px 40px -14px rgba(10,16,30,.30)`) and the computer casts a drop shadow +following its outline (`0 18px 26px rgba(10,16,30,.22)`; `0 22px 30px rgba(0,0,0,.55)` on dark); its +chin sits one layer behind its case. The link runs on the page plane, beneath cards and the +computer. In dark mode, shadows deepen (`0 24px 48px -16px rgba(0,0,0,.6)`) and raised surfaces add +a 1px line border. ## Shapes -Planes and cards use a 20px radius; buttons 12px; chips 6px; packets are fully rounded. The link is a -straight band with round caps that bends at most once. At 1024 scale the App icon uses a 64px plane -radius; the body is the macOS rounded rectangle on the 824px grid. +Cards use a 20px radius; buttons 12px; chips 6px; packets are fully rounded. The link is a +straight band with round caps that bends at most once. The computer is drawn from the App icon's own +layers with continuous corners; component icons use a 64px plane radius on the 824px grid at 1024 +scale. ## Icon Family -- **Structure:** an ink body carrying a centred three-plane stack — graphite workspace, vermilion - capabilities, paper result — each plane 58px up and to the right of the one beneath it. The mark - is the computer alone; the chat card and the link appear only in compositions around it. No - isometric projection; avoid any resemblance to cube marks. -- **Glyph:** the front plane carries one ink glyph with a 9% stroke. The App uses the **local node** - (a dot inside a ring). Each component swaps only this glyph: computer-use pointer, apple-cli - prompt, codex braces, swift-format aligned bars, claude speech bracket, cursor text caret, trae play - wedge, homebrew-tap install tray. -- **Small sizes:** at 32px and below, drop the workspace plane and thicken the glyph. -- **App icon:** delivered as an Icon Composer document on an ink background with three depth groups - — the result plane with its glyph, the capabilities plane and the workspace plane — plus a legacy +- **Structure:** component icons are an ink body carrying a centred three-plane stack — violet-ink + workspace, amber capabilities, ivory result — each plane 58px up and to the right of the one + beneath it. Icons never carry the chat card or the link; those appear only in compositions around the icons. No isometric projection; avoid any resemblance to cube marks. +- **Glyph:** the front plane carries one ink glyph with a 9% stroke; the same glyph appears on the + computer's screen in that member's compositions. Each component swaps only this glyph: + computer-use pointer, apple-cli prompt, codex braces, swift-format aligned bars, claude speech + bracket, cursor text caret, trae play wedge, homebrew-tap install tray. +- **App icon:** an original compact computer in ivory glass with an amber screen and a recessed + chin, over a violet design grid; defined by the `computer-mcp` entry in + [Iconography](#iconography) and delivered as an Icon Composer document plus a legacy `AppIcon.icns` for macOS 14 and 15. - **Never:** vendor logos, the Apple or Swift logo, SF Symbols or SF Pro inside brand artwork. The swift-sdk fork keeps its upstream identity. +## Iconography + +The App icon is a Liquid Glass icon generated from this entry with the `apple-app-icon-design` +generator. Its layers are original artwork in `Brand/app-icon/layers/`: a design grid, the +computer's recessed chin, its amber screen light and its ivory glass case. Accepted lint findings, +each by design: four groups keep the grid, chin, screen light and case in separate materials; the +grid lines run to the outline, so 0.7% of the grid falls outside the shape; the grid lines are +hairlines that fade below 32 px; the chin and the case sit over the white grid; and the case and the +chin share the ivory lightness, separated by depth rather than tone. + +```json +{ + "app_icons": { + "computer-mcp": { + "background": "#5A4BF5", + "gradient": true, + "groups": [ + { + "name": "Grid", + "layers": [ + { + "source": "Brand/app-icon/layers/grid.svg", + "name": "grid", + "fill": { + "solid": "#FFFFFF" + }, + "opacity": 0.2 + } + ], + "shadow": { + "kind": "none", + "opacity": 0 + }, + "specular": false + }, + { + "name": "Base", + "layers": [ + { + "source": "Brand/app-icon/layers/crt-base.svg", + "name": "crt-base", + "fill": { + "automatic-gradient": "#D8CDB0A6" + } + } + ], + "shadow": { + "kind": "neutral", + "opacity": 0.4 + }, + "translucency": { + "enabled": true, + "value": 0.35 + }, + "blur-material": 0.5, + "refractivity": { + "enabled": true, + "strength": 0.6, + "depth": 0 + } + }, + { + "name": "Light", + "layers": [ + { + "source": "Brand/app-icon/layers/crt-light.svg", + "name": "crt-light", + "fill": { + "automatic-gradient": "#FFB347" + } + } + ], + "shadow": { + "kind": "layer-color", + "opacity": 0.5 + }, + "translucency": { + "enabled": true, + "value": 0.1 + } + }, + { + "name": "Computer", + "layers": [ + { + "source": "Brand/app-icon/layers/crt-body.svg", + "name": "crt-body", + "fill": { + "automatic-gradient": "#F6EEDBA6" + } + } + ], + "shadow": { + "kind": "neutral", + "opacity": 0.5 + }, + "translucency": { + "enabled": true, + "value": 0.35 + }, + "blur-material": 0.5, + "refractivity": { + "enabled": true, + "strength": 0.6, + "depth": 0 + } + } + ], + "styles": { + "liquid-glass": { + "design_generation": 27 + } + } + } + } +} +``` + ## Components -- **Primary button:** vermilion fill, ink label in the interface sans, 12px radius. +- **Primary button:** violet fill, white label in the interface sans, 12px radius. - **Secondary button:** raised surface with a 1px line border. -- **Chat card:** raised surface, 20px radius, a title row naming the chat, and the request as a - vermilion bubble with ink text. -- **Planes:** graphite workspace plane labelled with the authorized folder; vermilion capabilities - plane labelled "Tools you allow"; raised result plane with the computer's name, a connected - status, the touched file and a passing command. Capability chips beside the composition name - Files, Shell, CLI, MCP, Skills and Computer Use. -- **Link and packets:** a link-rail band with a 6px vermilion line; packets are raised pills naming +- **Chat card:** raised surface, 20px radius, a title row naming the chat, and the request as an + amber bubble with ink text. +- **Computer:** the App icon's machine drawn flat — ivory case with a hairline edge, recessed chin, + amber screen carrying the member glyph or, for the App, the command and its result. Capability + chips beside the composition name Files, Shell, CLI, MCP, Skills and Computer Use. +- **Link and packets:** a link-rail band with a 6px amber line; packets are raised pills naming the tool, such as `file.write`. - **Status:** green for success, red for removals, caution badge for actions awaiting confirmation. -- **Chip and code block:** paper chip with a sans label; ink code block with paper text and a - vermilion prompt. +- **Chip and code block:** ivory chip with a sans label; ink code block with ivory text and an + amber prompt. ## Do's and Don'ts -- Do keep vermilion for the active path and the primary action only. +- Do keep amber for the active path and violet for actions and links; never set amber text on a + light surface. - Do show both the chat and the computer whenever the link appears. -- Do stack at most three planes, offset up and to the right. +- Do draw the computer from the App icon's layers; never redraw or restyle it per surface. - Do render every image text with the bundled OFL fonts, in both light and dark. -- Don't use gradients on planes, or rotate them. +- Don't use gradients on cards or the computer, or rotate them. - Don't draw clouds, globes or padlocks; the link carries the meaning. - Don't put text inside the App icon. ## Responsive Breakpoints are 900px, 600px and 370px. Below 900px the hero stacks copy above the illustration, the -link becomes vertical and the plane offset halves to 24px. Below 600px the stack collapses to two -planes and the display size drops to 52px (Chinese 44px); side margins are 24px, and 16px below +link becomes vertical and the computer scales down with the column. Below 600px the display size +drops to 52px (Chinese 44px); side margins are 24px, and 16px below 370px. Touch targets stay at least 44px. Controls keep visible focus, meaningful selected states, keyboard operation and reduced-motion support. ## Iteration Guide Change tokens here first, then regenerate every asset with the organization renderer and deliver -them through each repository's brand lock. A new component swaps only the front-plane glyph and -never introduces a new color. Check the App icon in every macOS rendition, including Clear and -Tinted, before delivery. The repository README lists the render, check and delivery commands. +them through each repository's brand lock. A new component swaps only its glyph — on the front plane +of its icon and on the computer's screen — and never introduces a new color. Check the App icon in +every macOS rendition, including Clear and Tinted, before delivery. The repository README lists the +render, check and delivery commands. diff --git a/README.md b/README.md index 87db14b..6b4cfa0 100644 --- a/README.md +++ b/README.md @@ -12,8 +12,9 @@ conventions every Computer MCP repository shares. Apps and Actions credentials with `MAINTENANCE.md`. - `DESIGN.md` is the design system: tokens, components, the icon family and composition rules. -- `Brand/` holds the renderer, its configuration and the rendered `Exports/` - with their `manifest.json`. +- `Brand/` holds the renderer, its configuration, the App icon's original layers + in `Brand/app-icon/layers/` and the rendered `Exports/` with their + `manifest.json`. - `.github/workflows/brand-check.yml` is the reusable workflow each repository calls to verify its brand lock. @@ -23,12 +24,23 @@ Text rendered into images (`Brand/config.json` `copy` and `members`) must match ## Updating the brand +Install Icon Composer from Xcode and set `APP_ICONS_SCRIPT` to the +`apple-app-icon-design` generator script (`skills/apple-app-icon-design/scripts/app_icons.py` in the +[showxu/skills](https://github.com/showxu/skills) repository). The manifest +records the script's SHA-256 next to the renderer versions. The generator finds +Icon Composer's `ictool` in the selected Xcode installation; set `IC_TOOL` to +select another export-capable renderer. Python 3 and `rsvg-convert` are also +required by the generator. + 1. Edit `DESIGN.md` or `Brand/config.json`. 2. Render: `npm ci --prefix Brand`, `npx --prefix Brand playwright install --only-shell chromium`, then `node Brand/render.mjs`. 3. Preview each macOS rendition of the App icon with Icon Composer's `ictool - Brand/Exports/app/AppIcon.icon --export-image --platform macOS --rendition ` - for Default, Dark, ClearLight, ClearDark, TintedLight and TintedDark. + Brand/Exports/app/AppIcon.icon --export-image --platform macOS --rendition + --output-file Brand/.cache/app-icon-preview.png --width 1024 --height 1024 + --scale 1 --design-generation ` + for Default, Dark, ClearLight, ClearDark, TintedLight and TintedDark, using + the `design_generation` from the Iconography entry. 4. Check: `npm --prefix Brand run lint` and `python3 Brand/brand.py check`. 5. Commit `DESIGN.md`, `Brand/` and the exports together. diff --git a/profile/brand/avatar.png b/profile/brand/avatar.png index e5f8b96..e66e84b 100644 Binary files a/profile/brand/avatar.png and b/profile/brand/avatar.png differ diff --git a/profile/brand/header-dark.png b/profile/brand/header-dark.png index 3bc43a3..1679ee8 100644 Binary files a/profile/brand/header-dark.png and b/profile/brand/header-dark.png differ diff --git a/profile/brand/header-light.png b/profile/brand/header-light.png index ca14a21..0ac66a7 100644 Binary files a/profile/brand/header-light.png and b/profile/brand/header-light.png differ