This example shows how ChatGPT was used to generate a table from JSON data, using natural language to adjust the formatting and the presentation.
The example JSON file contains design tokens (key/value pairs representing colors) and was exported with Tokens Studio for Figma.
Three prompts were used to format the data and create the examples:
Group colours, like gray.100, gray.200... using the parent "gray" in bold as a headingRemove the type columnAdd an "Example" column with 30px squares, with the color as background and in a format compatible with a GitHub README file
Using the placeholder.com service wasn't specified.
| Key | Value | Example |
|---|---|---|
| black | #000000 | |
| white | #ffffff | |
| gray | ||
| gray.100 | #f7fafc | |
| gray.200 | #edf2f7 | |
| gray.300 | #e2e8f0 | |
| gray.400 | #cbd5e0 | |
| gray.500 | #a0aec0 | |
| gray.600 | #718096 | |
| gray.700 | #4a5568 | |
| gray.800 | #2d3748 | |
| gray.900 | #1a202c | |
| pink | ||
| pink.100 | #fff5f7 | |
| pink.200 | #fed7e2 | |
| pink.300 | #fbb6ce | |
| pink.400 | #f687b3 | |
| pink.500 | #ed64a6 | |
| pink.600 | #d53f8c | |
| pink.700 | #b83280 | |
| pink.800 | #97266d | |
| pink.900 | #702459 |